安装
npm i react-router-dom -S
导入路由需要的组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
组件解释
BrowserRouter as Router 浏览器路由
所有的路由内容都应该放在Router 里面
<Router>
<NavLink></NavLink>
<Switch>
<Route />
</Switch>
</Router>
HashRouter as Router 哈希路由
NavLink 带active 导航
to 导航地址
to="/"
exact 必须精确匹配
如果被选中默认会有个active class
Link 导航
Route 路由页面
path 对应地址
component={ } 对应的组件
exact 精确匹配
Switch 一次只显示一个路由
<Switch>
<Route />
</Switch>
Redirect 路由跳转
from 从
to 跳转的地址
Prompt 退出提示
message 提示文字
WithRouter 让非路由组件具有 路由props
import { withRouter } from 'react-router-dom'
class ToDo{}
export defaultWithRouter(ToDo)
//包装
constructor(props){
props 有
match,history,location
}
路由组件的props###
history
go
goBack() //返回
goForward() //前进
push('/') //路由跳转
replace //跳转不留历史记录
location //地址栏信息
pathname //路径
match
params //路由参数
url //配置的地址
路由的参数
01 定义指令 Link指令
<Link to="/produce/1">产品1</Link> |
<Link to="/produce/abc">产品abc</Link></div>
02 定义路由
<Route path="/produce/:id" component={Produce}></Route>
03 定义组件-获取路由参数
function Produce({match}){
return (<h1>我是产品:{match.params.id}</h1>);
}
子路由
导入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 是可以省略的
