初试ReactRouterv4要注意什么

我们知道，Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。示例如下：

 

 
 
 


// 如果应用的地址是/,那么相应的UI会类似这个样子：

 


// 如果应用的地址是/news,那么相应的UI就会成为这个样子：

 

组件有如下属性：

1. path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；

2. exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；

3. strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

再次奉上两个鲜活的例子：

exact配置：

 strict配置：

同时，新版的路由为 提供了三种渲染内容的方法：

1. ：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；

2. ：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；

3. ：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

第一种方式没啥可说的，和之前一样，这里我们重点看下 的渲染方式：

// 行内渲染示例
 
Home
}/>

// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
  (
 
  
 
 )}/>
)

TIPS: 第三坑！ 的优先级要比 高，所以不要在同一个 中同时使用这两个属性。

和之前版本没太大区别，重点看下组件属性：

1. to（string/object）：要跳转的路径或地址；

2. replace（bool）： 为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false；

示例如下：

// Link组件示例

// to为string
关于

// to为obj


// replace 

是 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：

1. activeClassName（string）：设置选中样式，默认值为 active；

2. activeStyle（object）：当元素被选中时, 为此元素添加样式；

3. exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；

4. strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线； isActive（func）：判断链接是否激活的额外逻辑的功能；

从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：

// activeClassName选中时样式为selected
FAQs

// 选中时样式为activeStyle的样式设置
FAQs

// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
 if (!match) {
 return false
 }
 const eventID = parseInt(match.params.eventID)
 return !isNaN(eventID) && eventID % 2 === 1
}

Event 123

该组件用来渲染匹配地址的第一个 或者 。那么它与使用一堆route又有什么区别呢？

的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 都会被渲染。思考下面的代码：

如果现在的URL是 /about ，那么 , , 还有 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

现在，如果我们处于 /about ， 将开始寻找匹配的 。 将被匹配， 将停止寻找匹配并渲染 。同样，如果我们处于 /michael ， 将被渲染。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。