React路由使用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

一.路由概念

路由是根据不同的url地址显示不同的内容或者页面

二.路由安装

npm install react-router-dom@5

三.路由使用

1.路由方法导入

注意本文使用的HashRouter，路由中会有‘#’,在实际开发过程中，如果希望自身路由不存在‘#’,请将路由模式切换为Browser模式。在app文件中，将路由模式引入，并包裹Route组件。

import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom'
import Center from './components/center'
export default class App extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          <Route path='/center' component={Center}></Route>
        </HashRouter>
      </div>
    )
  }
}

2.路由重定向

exact精确匹配（Redirect及时使用了exact，外边也要嵌套Switch使用），如果Route不传入路径及from、to等，且放在Switch组件最后，将视为万能匹配，当上方条件都不满足时将会执行，并定向到该组件，适用于404页面的重定向。

 <HashRouter>
        <Switch>
          <Route path='/center' component={Center}></Route>
          <Redirect from='/' to='/login' />
          <Redirect from='/' to='/login' exact/>
          <Route component={NotFound}/> //万能匹配 当上方条件都不满足时执行
        </Switch>
 </HashRouter>

3.嵌套路由

在组件内部，保留头部等公共内容，动态显示其他内容，这个时候需要用到路由嵌套，其实就是子路由概念，在主路由如示例中/center后添加info、member等子路由，就实现了路由嵌套的功能。 Center.js中

    import React, { Component } from 'react'
import { Route , Switch} from 'react-router-dom'
import info from './info'
import member from './member'
export default class center extends Component {
  render() {
    return (
      <div>
          <div>头部</div>
          <div>
              <p>组件：</p>
              <Switch>
                  <Route path='/center/info' component={info}></Route>
                  <Route path='/center/member' component={member}></Route>
              </Switch>
          </div>
      </div>
    )
  }
}

4.路由跳转方式

路由跳转方式同vue中非常相似，包裹声明式导航（NavLink，通过link、a标签方式进行跳转）、编程式导航（通过js方法进行跳转，重用push方法跳转并携带参数） a.声明式导航

<NavLink to="/center" activeClassName="active"></NavLink>

b.编程式导航
类组件

 import React, { Component } from 'react'
 import { Route , Switch,useHistory} from 'react-router-dom'

 export default class center extends Component {

   render() {
     return (
       <div>
           <div onClick={()=>{this.handleNavigator()}}>跳转info</div>
       </div>
     )

   }
   handleNavigator(){
       this.props.history.push('/center/info')
     }
 }

函数式组件

  import React from 'react'
  import { useHistory} from 'react-router-dom'
  export default function Center(props) {
      const history=useHistory()
      const handleNavigator=()=>{
          //  props.history.push('/center/info') // 使用props中的history跳转
           history.push('/center/info') // 使用useHistoryHooks跳转
      }
      return (
          <div onClick={()=>{handleNavigator()}}>跳转info</div>
      )

  }

5.路由传参方式

路由传参包括动态路由传参以及query传参，动态路由传参方式是在路由后添加参数名称，在push时在路由后添加参数，而query传参是在使用js方法进行跳转时传参，使用query、state进行参数的传递。 a.动态路由传参

```js
    <Route path='/center/:myid' component={Center} exact></Route>
   this.props.history.push({pathname:`/center/${id}`})
```

b.query传参

 ```js
      this.props.history.push({pathname:'/center/info',query:{data:'111'}})
      this.props.history.location.query
      this.props.history.push({pathname:'/center/info',state:{data:'111'}})
      this.props.history.location.state
 ```

6.路由拦截

react路由除了component方式添加路由跳转组件，也可以通过render方式进行跳转，路由拦截可以通过Route中的render方法实现，在render方法中使用三目运算判断将要渲染的组件或路由，达到路由拦截效果。

import React, { Component } from 'react'
import {HashRouter,Redirect,Route,Switch} from 'react-router-dom'
import Center from './components/center'
import info from './components/info'
import member from './components/member'
export default class App extends Component {
  Auth(){
    if(localStorage.getItem('token')){
      return true
    }else{
      return false
    }
  }
  render() {
    return (
      <div>
        <HashRouter>
         
          <Switch>
                <Route path='/center' component={Center} exact></Route>
                  <Route path='/center/info' render={()=>{
                  return this.Auth()?
                  <info />:<Redirect to='/center/member'></Redirect>
                  }}>
                  </Route>
                  <Route path='/center/member' component={member}></Route>
              </Switch>
        </HashRouter>
      </div>
    )
  }
}

7.withRouter

很多时候我们并不能从props中获取history，使用history.push进行路由跳转，所以使用withRouter高阶组件将路由参数传入组件

import { withRouter } from 'react-router-dom'
withRouter（component）

8.反向代理

在实际开发过程中，我们向后台请求时需要配置代理，防止跨域问题的产生，除了后台配置以外，前端在react中使用http-proxy-middleware中间件进行代理配置。 代理配置文档 create-react-app.dev/docs/proxyi… npm install http-proxy-middleware --save src/setupProxy.js

import {createProxyMiddleware}=require('http-proxy-middleware')
module.exports=function(app){
    app.use(
        '/api':
            createProxyMiddleware({
                target:'http://~',
                changeOrigin:true,
            })
    )
}