React-router的注意事项

React-router的注意事项

1.入口文件index.js引入React-router

import {BrowserRouter as Router} from 'react-router-dom'  

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

注意：1.路由有两种模式 HashRouter：url中有#

​ BrowserRouter：需要和后端配合

​ 2.{BrowserRouter as Router} 将路由取名为Router

​ 3.组件形式让router作用全局

---

2.路由的使用

import {Route} from 'react-router-dom'

<Route path = "/home" component = { Home } ></Route>

1.错误路由设置

<Route component = {Error} ></Route>

2.重定向路由设置

import { Redirect} from 'react-router-dom'

<Redirect from = '/' to='/home' exact ></Redirect>

3.路径完全匹配

重定向用一下就好了

<Route path = "/home" component = { Home }  exact ></Route>

4.switch一次只加载一个路由

import {Switch} from 'react-router-dom'

<Switch>
              <Redirect from = '/' to='/home' exact></Redirect>
              <Route path = "/home" component = { Home }   ></Route>
              <Route path = "/category" component = {Category} ></Route>
              <Route path = "/mine" component = {Mine} ></Route>
              <Route path = "/list" component = {List} ></Route>
              <Route path = "/detail" component = {Detail} ></Route>
              <Route path = "/recommend" component = {Recommend} ></Route>
              <Route path = "/shopCar" component = {ShopCar} ></Route>
              <Route component = {Error} ></Route>
</Switch>

5.render可以定义一个路由模块

 <Route path = "/detail/001" render = {()=><div>detail001</div>}></Route>

3.路由激活

import {NavLink} from 'react-router-dom'

<NavLink activeClassName = 'active' to ={props.path}>

如果无需激活直接

import {Link} from 'react-router-dom'

4.render 和 children的区别

 <Route path = '/mine/login' render = {()=><div>Login</div>}></Route>	//不会直接显示
     
 <Route path = '/mine/login' children = {()=><div>Login</div>}></Route>	//children 会直接显示

5.路由link 的对象写法

 <Link to = {{
              pathname: '/list/002',
              search: '?id=001&type=yifu',
              state: {
                num: 100,
                price: 200
              }
            }}> list- 衣服 </Link>

6.动态路由

 <Route path = "/list/:id" component = { List }  exact></Route>

7.编程式导航

/* 
    编程式导航： push   replace  go  goback
  */

  goRecomend = () => {
    this.props.history.push('/recommend')
  }

  goLogin = () => {
    this.props.history.replace({
      pathname: '/mine/login'
    })
  }

  render () {
    return (
      <HomeContainer>
        home
        <hr/>
        {/* 首页跳转推荐页面 */}
        <button onClick = { this.goRecomend }> 跳转推荐 </button>
        {/* 首页跳转登录页面 */}
        <button onClick = { this.goLogin }> 跳转登录 </button>
      </HomeContainer>
    )
  }
}

8.路由监听

监听整个项目，我们要在最大的根组件中监听App组件

app不是路由组件 没有绑定3个属性（history，location，match）

所以需要通过高阶组件withRouter将app转换成路由组件

import { withRouter } from 'react-router-dom'

export default withRouter(App) ;