react-router - 掘金

什么是react-router:

这是react的一个库，常常用来做页面跳转，实现spa应用的功能。

什么是spa?

就是常说的单页应用，简单来说，页面只有一个完整的页面，当用户点击页面中的链接导致url变化的时候，页面不发生跳转，而是通过和虚拟dom的对比将页面的部分变化的区域重新渲染，常常和ajax连用获得数据。

要怎么用？

静态路由和动态路由

在v3版本，react-router一般使用的是静态路由。跟其他框架的路由配置很想，代码如下：

<Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
    </Route>
 </Router>

但是这种方法带来的坏处是，这种路由在程序启动开始，就不能再修改了，因为他是一一对应的关系。这与react的理念不一样：“Break The UI Into A Component Hierarchy”。尽量让臃肿的代码分成小块。所以从v4开始，react-router变成了动态的路由。上述代码用动态路由表示：

<BrowserRouter>
    <Container/>
</BrowserRouter>

const  Container = ()=>{
    return (
        <div>
            <h1>Hello,this is Container</h1>
            <Route path="about" component={About} />
            <Route path="inbox" component={Inbox} />
        </div>
    )
}

路由跟整个ui组件紧密的结合在了一起，可以在各处使用它们。然后从v4开始规定，路由不得再嵌套路由，它将路由使用在了各个地方，代码变得更加的灵活。从v4开始，react将react-router的核心区块给分割了开来，分是对网页使用还是对app使用。如果要用web，则使用react-router-dom,如果对于app，则使用react-router-native。我们这边讲讲react-router-dom。

常用的api

因为从v4开始，react将react-router的彻底拆分，所以我们在写react-router的时候，只需要引入react-router-dom这个包就好了，因为react-router会作为react-router-dom的依赖被一起下载进来。接下来介绍常用的api:

BrowserRouter和hashRouter： HashRouter basically it uses the hash in the URL to render the component. Since I was building a static one-page website, I needed to use this.

BrowserRouter, it uses HTML5 history API to render the component. The history can be modified via pushState and replaceState. More information can be found here

这是官方对他们的介绍，他们俩的作用基本相似，就是用来监听路由的变化，以及在路由变化的时候读取信息，不同点在于他们的实现的原理不同，一个是依靠H5的history这个api来实现，另一个是用hashURL,在一般情况下，两者都可以使用，只有在特殊环境比如说在ie上的时候，就得换成BrowserRouter。

Route：
用于定义路由的路径以及设置相应对于的组件，常见的写法如下：<Route path={"/xxx"} component={Component} />。path规定了相应的路径，compent写明了对应要渲染的组件。这个组件还有几个参数分别是exact:用来取消模糊匹配，childern:用来得到给他传入的子组件

对于path这个参数，还需要特别指出的是通配符这一个概念，传入的参数决定了页面跳转的url是什么。比如我写/xiaoznz,那就是跳转到根目录的/xiaoznz路径下，如果写的是/xx/:xx,则如根目录/xx/xiao,根目录/xx/znz这样的都可以。如果写的是/xx/* ,则表明之后跟任何东西都可以。

请特别牢记，path一定不要忘记写"/"

Switch:
用于包裹Route，使得Route匹配到相应路径之后就不再往下匹配
Redirect: 用来做路由跳转，从一个路由到另一个路由，一般常常用在规定首页页面的用途上。写法如下<Redirect exact to={"/xxx"} path={"/"}，还可以用来做重定向，写上参数from={“/xxx”}即可
Link:
用来设置页面跳转的链接，跟html中的a标签很像，区别是它能去拦截页面的跳转，并route中寻找匹配的到url并进行跳转，常见的参数为to={"/xxx"},xxx为要跳转到的链接的位置
NavLink:
功能和Link一样，但是它能给Link添加不少参数。比如isActive,比如activeStyle,一般用在需要css的Link上面。

Route传入的参数

知道怎么用还不够，很多时候我们需要知道url传入的参数是什么。这边介绍以下类组件和hooks各自对应的获得参数的办法：

类组件：

params参数：
路由链接（携带参数）：<Link to='/demo/test/tom/18'>详情</Link>
注册路由（声明接收）：<Link to='/demo/test/:name/:age' component={Test}>
接收参数：this.props.match.params
search参数：
路由链接（携带参数）：<Link to='/demo/test?name=to&age=18'>详情</Link>
注册路由(无需声明）：<Link to='/demo/test' component={Test}>
接收参数：this.props.location.search

获取到的search是urlencoded编码字符串，需要借助querystring解析
state参数：
路由链接（携带参数）：<Link to={path:'/demo/test/tom/18',state:{name:"tom",age:18}}>详情</Link>
注册路由（无需声明）：<Link to='/demo/test' component={Test}>
接收参数：this.props.location.state

刷新也可以保留住参数

hooks

在react hooks中，我们有以下api:

useHistory 用来做页面的回跳，可以回到之前的页面
useLocation 可以用来返回当前url的位置，比如用在useEffect中监听，这样能随时得到当前的路径
useParams 获取当前url下的参数，注意要与path路径中的变量对应，比如path中传了"/xxx/:xx"，那么解析时要解析为xx
useRouteMatch 尝试用route相同的方式去匹配当前的url，如果需要一些不渲染当前route的情况，那么这个api就很有用到这里react-router就总结完了