安装
npm i react-router-dom -S
导入
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
HashRouter与BrowserRouter
<Router>
<Route path="/">
<Redirect to="/home" />
</Route>
<Route path="/home" component={Home} />
<Route path="/hooks" component={Hooks} />
</Router>
BrowserRouter as Router
操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/home
,可正常访问
操作二: 浏览器直接输入localhost:3000/hooks
结果: 浏览器无法获得正确的结果,Cannot GET /hooks
操作二: 浏览器直接输入localhost:3000/home
结果: 浏览器无法获得正确的结果,Cannot GET /home
操作三: 浏览器直接输入localhost:3000/
成功后,点击内容<Link to="home">Home</Link>
结果: 可成功跳转
如果前端使用了browserRouter
,每次改变路由时,会向服务器发送请求,因为服务器未配置对应的路径指向对应的文件,自然导致出现404的情况.(对于初始化页面,即路由为/时,不会发送请求)
因此在使用browserHistory
需要再加一层服务器配置(node/nginx),让前端发送的请求映射到对应的html文件上.
HashRouter as Router
操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/#/home
,可正常访问.
操作二: 浏览器直接输入localhost:3000/#/hooks
结果: 可正常访问
由于hashRouter
会在路径上添加/#/
,而/#/
后面的所有都不会发送到服务器端,即对于服务器而言,路径依旧是localhost:3000
,路由切换在前端完成。
但是官方会更推荐使用browserRouter
,貌似是因为其构建于H5的History API
,比起hashRouter
,它多出了更多的方法操控url
link与Navlink
Link
Link
属于前端内部跳转,在跳转时不会向服务器发送请求。点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载
<Link>使用to参数来描述需要定位的页面。它的值既可是字符串,也可以是location对象(包含pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象
replace(bool):为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址;为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false;
Link 组件最终会渲染为 HTML 标签 <a>,它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。
NavLink
<NavLink>是<Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数,组件的属性有
activeClassName(string):设置选中样式,默认值为active
activeStyle(object):当元素被选中时,为此元素添加样式
exact(bool):为true时路径中的hash值必须和path完全一致才渲染对应的组件,如果为false则'/'也可以匹配'/xxx';(如果strict属性为false,则末尾是否包含反斜杠结尾不影响匹配结果)
strict(bool):主要就是匹配反斜杠,规定是否匹配末尾包含反斜杠的路径,如果strict为true,则如果path中不包含反斜杠结尾,则他也不能匹配包含反斜杠结尾的路径,这个需要和exact结合使用
isActive(func)判断链接是否激活的额外逻辑的功能
// activeClassName选中时样式为selected
<NavLink
to="/faq"
activeClassName="selected">FAQs</NavLink>
// 选中时样式为activeStyle的样式设置
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}>FAQs</NavLink>
// 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}>Event 123</NavLink>
Switch 一次只显示一个路由
<Switch>
<Route path="/a"/>
<Route path="/b"/>
<Route path="/c"/>
</Switch>