React路由

React路由

一、路由的形式

1. hash路由 : HashRouter
2. history路由 : BrowserRouter

路由的所有配置项必须在<HashRouter>或者<BrowserRouter>的包裹范围之内.

• 安装

cnpm install react-router-dom -S

二、路由的显示

• route

作用：配置路由以及路由的显示

• 配置项：

path : 路由匹配的路径

component : 路由匹配成功时，显示的组件 (值为组件名称)

render : 路由匹配成功时，显示的组件 (值是一个函数)

exact : 完全匹配

三、路由跳转的方式

1. <a>标签

   <a href="#/home">首页</a>
   <a href="#/classify">分类</a>
   

2. Link

   没有选中标识的(eg : 返回按钮)

   <Link to="/home">首页</Link>
   <Link to="/classify">分类</Link>
   

   当触发重复路由的时候，会提示警告

   Link.png

3. Nav-Link

   当前路由有选中标识class：active(eg : 底部tabbar)

   <NavLink to="/home">首页</NavLink>
   <NavLink to="/classify">分类</NavLink>
   

   activeClassName更改被选中后的类名

   activeStyle={{color:”#c33”}}设置被选中后的样式

4. 编程式导航

   • 配置项

   to : 需要跳转的路径

   activeClassName : 更改选中后的标识

   activeStyle : 选中后的样式

四、路由传值

1. 动态路由

   • 在定义路由时，通过/:属性的方式来定义传递的属性

   <Route path="/detail/:id/:name" component={Detail}></Route>
   

   • 在跳转时，通过/:值的方式传递数据

   {
       goods.map((item, index) => (
           <li key={index}>
               <Link to={'/detail/' + item.id + "/" + item.name}>{item.name}</Link>
           </li>
       ))
   }
   

   • 在接收的页面，通过this.props.match.params接收

   let { id, name } = this.props.match.params;
   

2. query传值

   • 在定义的地方，配置路由跳转的路径

   <Route path="/detail" component={Detail}></Route>
   

   • 在路由跳转时，通过query传值的方式传参

   {
       goods.map((item, index) => (
           <li key={index}>
               <Link to={'/detail?id=' + item.id + '&name=' + item.name}>{item.name}</Link>
           </li>
       ))
   }
   

   • 在接收的页面，通过this.props.location.search接收

   let { id, name } = url.parse(this.props.location.search, true).query;
   

3. 内存传值

   跳转之后，刷新页面时值会丢失

   • 在路由跳转时，通过to={{pathname:””,query:{}}}

   {
       goods.map((item, index) => (
   
           <li key={index}>
               <Link to={{ pathname: "/detail", state: { id: item.id, name: item.name } }}>{item.name}</Link>
           </li>
   
       ))
   }
   

   • 在接收的页面，通过this.prop.location.query接收

五、路由嵌套

<Route path="/classify" render={() => {
    return (
        <Fragment>
            <Route component={Classify} />
            <Switch>
                <Redirect from="/classify" to="/classify/hotMovie" exact />
                <Route path="/classify/hotMovie" component={HotMovie} />
                <Route path="/classify/commingMovie" component={CommingMovie} />
            </Switch>
        </Fragment>
    )
}}></Route>

六、编程式导航

• this.props.history.push
• this.props.history.goBack
• this.props.history.goFroward
• this.props.history.go
• this.props.history.replace

七、component渲染页面与render渲染页面的区别

1. 在route组件中，通过components属性进行页面渲染时，会默认给当前组件传递3个值：history、location、match。而render需要设置props参数才能传递

   <Route path="/detail" component={(props)=>{
       return <Detail {...props}></Detail>
   }}></Route>
   

2. render可以渲染组件和标签

    <Route path="/home" render={()=>{
       return <Home username="lxc"/>
   }}></Route>
    <Route path="/home" render={()=>{
       return <h2>title</h2>
   }}></Route>
   

3. render渲染时可以传值，进行更多的业务逻辑

4. 一般情况下，通过render的渲染方式进行路由的嵌套

八、重定向

Redirect

九、Switch

作用：只匹配一个路由

• exact完全匹配

十、路由懒加载react-loadable

cnpm install react-loadable

• 引入

import leadable from "react-loadable"

const Home = loadable（{
    
}）

十一、withRouter

• 高阶组件

给当前props传入一个对象，该对象是路由的3个值{history,match,m}