7.1 初时react-router
安装react-router
npm install react-router-dom --save
- 引⼊顶层路由组件包裹根组件
- 引⼊Link组件编写路由导航
- 引⼊Route组件编写导航配置
exact 完全匹配,只有路径完全⼀致时才匹配
import React from 'react'
import { BrowserRouter, Link, Route,Switch } from 'react-router-dom'
function App() {
return (
<div>
<ul>
<li>
// 2. 引⼊Link组件编写路由导航
<Link to="/">首页</Link>
</li>
<li>
<Link to="/cart">购物车</Link>
</li>
<li>
<Link to="/mine">我的</Link>
</li>
</ul>
{/* Switch 只匹配一个路由 */}
<Switch>
// 3. 引⼊Route组件编写导航配置
{/* exact是确切匹配 */}
<Route exact path="/" component={Home}></Route>
<Route path="/cart" component={Cart}></Route>
<Route path="/mine" component={Mine}></Route>
<Route exact component={NotFound}></Route>
</Switch>
</div>
)
}
//首页组件
function Home() {
return <div>首页</div>
}
function Cart() {
return <div>购物车</div>
}
function Mine() {
return <div>我的</div>
}
function NotFound() {
return <div>404页面</div>
}
export default function RouterExample() {
return (
<div>
<h1>Router显示</h1>
//1. 引⼊顶层路由组件包裹根组件
<BrowserRouter>
<App />
</BrowserRouter>
</div>
)
}
7.2 路由传参取参
1.声明式导航路由配置时配置路由参数
- 配置
<Route path="/detail/:course" component={Detail}></Route>
- 传递
<Link to="/detail/react">react</Link>
- 获取
解构路由器对象⾥的match出来(macth获取参数信息)
{match.params.course}
2.编程式导航式传递参数与获取
- 解构路由器对象获取到导航对象 history(⽤作命令式导航)
- 通过事件执⾏history.push({ pathname: “/”, state: { foo: “bar” } })传递的参数装载在state⾥⾯
- 从路由信息解构出location(当前的url信息)对象 location.state进⾏获取
import React from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
import { Button } from 'antd'
function App() {
return (
<div>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/cart">购物车</Link>
</li>
<li>
<Link to="/mine">我的</Link>
</li>
</ul>
{/* Switch 只匹配一个路由 */}
<Switch>
{/* exact是确切匹配 */}
<Route exact path="/" component={Home}></Route>
<Route path="/cart" component={Cart}></Route>
<Route path="/mine" component={Mine}></Route>
//配置
<Route path="/detail/:course" component={DetailfromCart}></Route>
<Route component={NotFound}></Route>
</Switch>
</div>
)
}
//解构路由器对象获取到导航对象 history(⽤作命令式导航)
function DetailfromCart({ match, location, history }) {
console.log('match,location,history', match, location, history)
return (
<div>
//获取
{match.params.course}登场
//通过事件执⾏history.push({ pathname: "/", state: { foo: "bar" } })传递的参数装载在state⾥⾯
<Button
onClick={() => history.push({ pathname: '/', state: { foo: 'mew' } })}
>
返回首页
</Button>
</div>
)
}
//首页组件
function Home({ location }) {
if (location.state && location.state.foo) {
//从路由信息解构出location(当前的url信息)对象 location.state进⾏获取
console.log('从mew带回来的参数', location.state.foo)
}
return (
<div>
首页
{location.state && location.state.foo ? (
<p>从mew带回来的参数{location.state.foo}</p>
) : null}
</div>
)
}
function Cart() {
return (
<div>
<ul>
<li>
//传递
<Link to="/detail/mew">Mew</Link>
</li>
<li>
<Link to="/detail/gulf">Gulf</Link>
</li>
</ul>
</div>
)
}
function Mine() {
return <div>我的</div>
}
function NotFound() {
return <div>404页面</div>
}
export default function RouterExample() {
return (
<div>
<h1>Router显示</h1>
<BrowserRouter>
<App />
</BrowserRouter>
</div>
)
}
7.3 嵌套路由及路由重定向
import React from 'react'
import { BrowserRouter, Link, Route, Switch, Redirect } from 'react-router-dom'
import { Button } from 'antd'
//一级组件
function App() {
return (
<div>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/cart">购物车</Link>
</li>
<li>
<Link to="/mine">我的</Link>
</li>
</ul>
{/* Switch 只匹配一个路由 */}
<Switch>
{/* exact是确切匹配 */}
<Route exact path="/" component={Home}></Route>
<Route path="/cart" component={Cart}></Route>
<Route path="/mine" component={Mine}></Route>
<Route path="/detail/:course" component={DetailfromCart}></Route>
<Route component={NotFound}></Route>
</Switch>
</div>
)
}
function DetailfromCart({ match, location, history }) {
console.log('match,location,history', match, location, history)
return (
<div>
{match.params.course}登场
<Button
onClick={() => history.push({ pathname: '/', state: { foo: 'mew' } })}
>
返回首页
</Button>
</div>
)
}
//首页组件
function Home({ location }) {
if (location.state && location.state.foo) {
console.log('从mew带回来的参数', location.state.foo)
}
return (
<div>
首页
{location.state && location.state.foo ? (
<p>从mew带回来的参数{location.state.foo}</p>
) : null}
</div>
)
}
function Cart() {
return (
<div>
<ul>
<li>
<Link to="/detail/mew">Mew</Link>
</li>
<li>
<Link to="/detail/gulf">Gulf</Link>
</li>
</ul>
</div>
)
}
//二级组件嵌套在以及组件里面显示
function Mine() {
return (
<div>
<h1>我的</h1>
<ul>
<li>
<Link to="/mine/userinfo">个人信息</Link>
</li>
<li>
<Link to="/mine/order">客户订单</Link>
</li>
</ul>
{/* 嵌套路由 */}
<Switch>
<Route
path="/mine/userinfo"
component={() => <div>个人信息哟</div>}
></Route>
<Route
path="/mine/order"
component={() => <div>客户订单哟</div>}
></Route>
{/* 重定向 */}
<Redirect to="/mine/userinfo"></Redirect>
</Switch>
</div>
)
}
function NotFound() {
return <div>404页面</div>
}
export default function RouterExample() {
return (
<div>
<h1>Router显示</h1>
<BrowserRouter>
<App />
</BrowserRouter>
</div>
)
}
注意:嵌套的⼦路由需要跟随⽗路由且不设置确切匹配
7.4 路由守卫
路由守卫