Router组件

浅唱_那一缕阳光
103 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

什么是Router组件

HashRouter和BrowserRouter只是提供了不同的路由选择，想要真正使用路由还需要Router组件。
当浏览器中的URL和Router组件的path匹配时，会呈现对应的UI。
代码格式如下：

<Router path='user' component={UserView}/>

这里的UserView就是一个视图组件，当Url和path匹配时，就会去渲染UserView。

Path匹配

path默认情况下是一种模糊匹配，如果当前URL是以该path开始的就会被匹配，如下：

<Route path='/' component={IndexView} />  
<Route path='/about' component={AboutView} />  
<Route path='/about/details' component={AboutDetailView} />

当浏览器URL为/about/details时，会发现三个路由都会被渲染，如果希望URL和path必须一致时才能匹配，就可以使用精确匹配，只要把Route的exact属性设置为true,就会采取精确匹配。

<Route path='/' exact component={IndexView} />  
<Route path='/about'exact component={AboutView} />  
<Route path='/about/details' component={AboutDetailView} />

现在当浏览器URL为/about/details时，就只会渲染AboutDetailView。
我们可以基于精准匹配之上再设置严格匹配，如url为/about/时，也能匹配<Route path='/about' exact component={AboutView} />。
如果希望更加严格，当/about/末尾带/也不会被匹配到，可以把该路由设置为严格匹配：<Route path='/about' exact strict component={AboutView} />

path的其他写法

path里还有两种特殊的写法：
多路径匹配和path参数。

  1. 多路径匹配
    在path中可以传递一个数组，数组中存放多个路径，当其中一个路径与URL匹配时，则认定该路由匹配当前URL。
    如：<Route path={['/about','/index']} component={AboutView} /> 中，可以看到该Route匹配两个规则/about和/index。

  2. path参数 ，及通过path进行一些参数的传递 比如现在有一个带翻页导航的列表视图，路径规则为/list/页码，页码这一项是可变的。
    在编辑path时，不可能写一堆路径在这里，另外页码可能在视图组件中还需要用到。
    这时，就需要使用带参数的path，如：
    <Route path='/list/:page' exact component={ListView} />
    可以看到path里有一个：page,：，这是一标识，标识出这里是一个path参数。
    如果当前URL为/list/1时，该路由就会被匹配。
    并在路由信息的params传递数据params:{page:1}.
    page会被当做参数的key值，而RUL中的匹配到的信息则会被解析为page的value.

avatar
文章
阅读
粉丝