官方文档地址:https://reactrouter.com/web/guides/quick-start
先说一下高阶组件的意思,一个函数 接受一个组件作为参数 返回一个新的组件
功能性的封装 减少重复代码
一般被高阶组件处理过的组件获取数据 都从props获取
Router就是路由器,里面包含若干个Route(路由)
常用的Router有两个:
1、<BrowserRouter>
2、<HashRouter>
BrowserRouter即在浏览器地址栏中不显示#
,而是以传统的URI显示
而HashRouter就是以#
为间隔符,显示URI
前者相比于后者利于SEO
Route包含在Router中,但更多情况下,我们直接都是把Router放在“根”上,也即App上:
import React from "react";
import ReactDom from "react-dom";
import App from "./pages/App";
import {BrowserRouter as Router} from "react-router-dom"
ReactDom.render(
<Router>
<App/>
</Router>
, document.getElementById("root"));
这样,在其他组件内,就不用让Router包裹Route了
那么如何使用Route呢?
Route有两个特别重要的属性:path和component
<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>
这样,当匹配到/hello
时,就会显示Nav1组件的内容
当然,这样是默认继续匹配的,什么意思呢?当匹配到/hello时,如果还有/hello/hello路径的话,也会继续匹配
解决办法也很简单,使用Swtich组件即可
也即,在Route上再包一层Switch
<Switch>
<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>
</Switch>
官网对于Switch时这样介绍的:
Renders the first child
<Route>
or<Redirect>
that matches the location.
嵌套路由
在路由里套路由 所有的组件你都可以使用使用 Link Switch ..
嵌套路由的上一级 千万不能加exact匹配
<Route path='/singer' render={()=>{
<Route xxx={xxx}></Route>
<Route xxx={xxx}></Route>
}}></Route>
说完基本的路由后,需要认识“导航链接”
基本理解就是通过导航链接跳转到相应路由,毕竟你不会让用户自行在浏览器地址上输入相应的URI吧?
简单理解,就是一个a标签罢了!
<Link to="/hello">导航1</NavLink>
<Link to="/world">导航2</NavLink>
有一个基本属性,就是to
,也即要导航到的路径
NavLink
Link已经足够用了,但是一般导航我们都有一个激活class,但该导航激活后,会有个高亮的效果,那么如何实现呢?
一般情形下,如果使用NavLink的话,会自动添加一个名为active
的class,如果要自定义,那么给NavLink添加要给属性即可:activeClassName
<NavLink to="/hello">导航1</NavLink>
<NavLink to="/world">导航2</NavLink>
传递隐形参数
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>
其中state就是你要隐形传递的数据,这里的数据时不会显示在地址栏或者哪里的
replace
<Link
replace={true}
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>
代表不留下历史记录
路由传参
在路径上加上:参数名
即可,如果可空,那么使用:参数名?
如:
<NavLink to="/hello/:id?">导航1</NavLink>
<NavLink to="/world/:id">导航2</NavLink>
如果未找到页面,返回404,如何做?
在所有Route后面再加上一个Route,返回一个404组件即可,但是,注意:
需要使用Switch来包裹,或者每个Route都是用exact属性,来使精准匹配URL