react路由如何快速上手

01 路由安装

安装指令：npm i react-router-dom@5.0

02 路由组件

HashRouter 哈希路由 as Router

BrowserRouter 浏览器路由 as Router

Route 存放路由的页面

• path 路径
• componen t组件
• render 渲染

<Route path="/admin/dash" component={Dash}></Route>

NavLink 导航链接

• to 链接地址
• exact 精确匹配
• 匹配的链接会自动添加class active

<NavLink to='/login' exact ></NavLink>

Link 链接

• to 链接地址
• exact 精确匹配

Redirect 重定向

• to 重定向到...
• from 从...到...

 <Redirect to={{ pathname: "/", state: { redirect: location.pathname } }}></Redirect>

Switch 一次只匹配一个路由

03 路由props

match

• path 路径
• url 地址
• isExact 精确匹配
• params 参数

history

• go 跳转

• goBack 返回

• goForward 前进

• push 跳转

• replace 替换

• listen 监听

// 如果没有指定redirect 跳转到admin页面
history.push(redirect);

location

• pathname 路径地址
• search 查询
• hash 哈希
• state 状态

NavLink to={{
    pathname:"/details/abc",
    search:"name=mumu&age=18",
    hash:"good",
    state:{reidrect:"/about"}
}}>详情abc</NavLink>

04 普通路由

<NavLink to=“/about”>
<Route path="/about" component={About}>

05 路由传参

 props.match.params.id 获取参数

<NavLink to=“/details/abc”>
<Route path="/details/:id" component={Details}>

06 子路由

父路由Admin和普通是一样的

<NavLink to="/admin/dash">
<Route path="/admin/dash" component={Dash}>