⻚⾯连接器之路由react-router

安装

npm  i react-router-dom --save

• 特点
  • react⼀切皆组件，路由也是组件
  • 分布式的配置, 分布在你页面的每个角落
  • 包含式配置, 可匹配多个路由

写法

• 引入顶层路由组件包裹根组件

import React from 'react'
import { BrowserRouter} from 'react-router-dom'
export default function RouterSample() {
 return (
 <div>
 <h1>学习react路由</h1>
 <BrowserRouter>
 <App></App>
 </BrowserRouter>
 </div>
 )
}

• 引入Link组件编写路由导航

<Link to="/">首页</Link>
// to指定跳转去的路径

• 引入Route组件编写导航配置

<Route exact path="/" component={Home}><Route>
// path 配置路径
// component 配置路径所对应的组件
// exact 完全匹配, 只有路径完全一致时才匹配

• 编写导航配置对象的component组件

路由传参&取参

• 用的比较多的两种传参取参方式
  1. 声明式导航路由配置时配置路由参数
     • 配置

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

     • 传递

       <Link to="/detail/react">react</Link>
     

     • 获取

        // 解构路由器对象里的match出来(match获取参数信息)
        { match.params.course }
     

  2. 编程式导航式传递参数与获取
     • 解构路由器对象获取到导航对象history(用作命令行导航)
     • 通过事件执行history.push( { pathname: " / ", state: { foo: "bar" } } )传递的参数装载在state里面
     • 从路由信息解构出location(当前的url信息)对象location.state进行获取

嵌套路由及路由重定向

function ClassA() {
    return (
        <div>
            <ul>
                <li><Link to="/class/A">详情</Link></li>
                <li><Link to="/class/B">编辑</Link></li>
                <Route path="/class/A" component={() => <div><h1>详情</h1></div>}></Route>
                <Route path="/class/B" component={() => <div><h1>编辑</h1></div>}></Route>
                <Redirect to="/class/A"></Redirect>
            </ul>
        </div>
    )
}