安装
npm i react-router-dom -S
路由组件
BrowserRouter as Router浏览器路由 别名 Router
所有的路由内容都应该放在Router里面
HashRouter as Router 哈希路由
NavLink 带active导航
-
to导航的地址
to="/"
exact必须精确匹配如果被选中默认会有个
active的class
Link 导航
- to 切换的页面
Router 路由页面
path对应的地址component={} 对应的组件exact精确匹配
Switch 一次只显示一个路由
<Switch>
<Route />
</Switch>
Redirect 路由跳转
from 从
to 跳转的地址
Prompt 退出提示
- message 提示文字
WithRouter
让非路由组件具有 ``路由Props`
import {WithRouter} from 'react-router-dom'
class ToDo{}
export default WithRouter(ToDo)
包装
constructor(props){
props
match.history.location
}
路由的参数
<NavLink to="/produce/123">
<Route path="/produce:id" component={Produce}>
function Produce({match}){match.params.id}
路由组件的props
history
go
goBack() 返回
goForward 前进
push("/") 切换跳转
replace 跳转不留历史记录
location 地址栏信息
-
pathname路径
match
params
路由参数url
配置的地址
子路由
导入Navlink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'
01 定义指令 Link指令
<NavLink to="/detail">详情</NavLink>
02 定义主路由
<Route path="/detail" component={Detail}></Route>
03 编写主路由
function Detail({location,match}){
return (
<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> |
<NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
</div>);
}
//match.url 获取当前匹配的主路由地址
04 编写子路由
function Arg(){
return (<h1>我是Arg </h1>);
}
function Com(){
return (<h1>我是com</h1>);
}
路由404配置 与Switch
01 导入Switch
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'n
02 定义路由
<Switch>
<Route component={NoMatch}></Route>
</Switch>
//定义404路由要写到最后
03 编写404路由
function NoMatch({location}){
return (<h1>页面没有找到{location.pathname}</h1>);
}
重定向
我们需要写一个默认的子路由，这个时候可用重定向
01 导入重定向
import {
BrowserRouter as Router,
Route,
Link,
Switch,
NavLink,
Redirect
} from 'react-router-dom'
重新编写 主路由
function Detail({location,match}){
return (<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> |
<NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Switch>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
<Redirect from={match.url} to={match.url+'/arg'}/>
</Switch>
</div>);
}
//from 是可以省略的
