前言
上篇文章给大家介绍了react项目中路由的基础用法,今天给大家介绍关于router在实战项目中更多的知识
路由重定向
看下面的案例:
1.使用Redirect重定向首先要进行导入
2.可以看到这里我们点击登录会跳转到login页面,但是我们在里面添加Redirect标签,给to后面添加路径,也就是重定向到该路径。所以我们点击登录只会跳转/user
import React, {
Component } from 'react'
import {
BrowserRouter, Link, Route, Redirect } from 'react-router-dom'
export class Login extends Component {
render() {
return (
<div>
<h1>登录</h1>
<Redirect to='/user'/>
</div>
)
}
}
export class User extends Component {
render() {
return (
<div>User 用户中心</div>
)
}
}
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<Link to='/login'>登录</Link>
{
/* <Link to='/user'>user</Link> */}
<Route path='/login' component={
Login}/>
<Route path='/user' component={
User}/>
</BrowserRouter>
</div>
)
}
}
export default App
看效果,访问login自动跳转到user页面
手动跳转
除了我们上面学的使用link进行跳转,我们还可以通过手动触发的形式进行路由跳转,下面我们一起来看看如何实现:
实现手动跳转有一个前提:,就是必须获取到history对象,这里的history不是window的history
来看代码:
1.首页,关于,用户中心三个页面都使用link进行跳转,这是我们原来的方法
2.在about页面,我们给跳转按钮绑定onClick事件,在jump中定义props,发现里面的内容就是路由的信息,所以可以直接props.history.push(’/user’)让其跳转到user
import React, {
Component } from 'react'
import {
BrowserRouter, Link, Route, Switch} from 'react-router-dom'
function Home(props) {
console.log(props)
return <h1>Home</h1>
}
function User(props) {
console.log(props)
return <h1>User</h1>
}
const About = (props) => {
const jump = () => {
console.log(props)
props.history.push('/user')
}
return (
<div>
<h2>About</h2>
<button onClick={
e=>{
jump()}}>跳转</button>
<Home/>
</div>
)
}
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<ul>
<li><Link to='/home'>首页</Link></li>
<li><Link to='/about'>关于</Link></li>
<li><Link to='/user'>用户中心</Link></li>
</ul>
<Switch>
<Route path='/home' exact component={
Home} />
<Route path='/about' component={
About} />
<Route path='/user' component={
User} />
</Switch>
</BrowserRouter>
</div>
)
}
}
export default App
看一下效果:
对于上面的代码,我们在home组件中打印的props为空,但是about中打印的却有值。因为home是普通渲染的组件,是不可以直接获取到history、location、match对象的。那么如果普通渲染的组件也希望获取到对应的对象和属性要怎么做?
- 在组件中增加属性,通过高阶组件去添加属性
- react-dom-router也是通过高阶组件的形式为我们的组件添加一些相关的属性的
- 使用withRouter高阶组件进行包裹
高阶组件的手动跳转
这里我们需要用到withRouter,直接在前面引入即可
import {
BrowserRouter, Link, Route, Switch, withRouter } from 'react-router-dom'
然后进行使用:
1.定义 WithHomeRouter = withRouter(Home),传入home
2.在原来渲染home组件的地方就可以直接使用< WithHomeRouter/>组件
const WithHomeRouter = withRouter(Home)
function User(props) {
return <h1>User</h1>
}
const About = (props) => {
const jump = () => {
console.log(props) // 路由信息对象,里面有history、location、match
// 通过路由跳转(不论是地址栏输入地址还是link跳转还是手动)展示的组件才会有对应的路由信息
props.history.push('/user')
}
return (
<div>
<h2>About</h2>
<button onClick={
e=>{
jump()}}>跳转</button>
{
/* 如果是普通组件渲染则没有路由信息,如果需要普通组件拥有路由信息,则可以使用withRouter这个高阶组件来实现 */}
<WithHomeRouter/>
</div>
)
}
原来我们点击关于是没有打印的props的信息的,使用withRouter高阶组件进行包裹之后,就可以打印出来路由的信息:
好了,本篇文章到这里结束了,如果对你有帮助,可以点赞关注支持一下~~
后续我还会带来更多前端知识内容