React路由管理之React Router总结

前端之家收集整理的这篇文章主要介绍了React路由管理之React Router总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。

React Router是做什么的呢,官方的介绍是:

A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading,dynamic route matching,and location transition handling built right in. Make the URL your first thought,not an after-thought.

大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。

下面是一些React Router的用法

一 简单渲染Route

有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。

render((

),document.getElementById('app'))

这里使用了hashHistory - 它管理路由历史与URL的哈希部分。

添加更多的路由,并指定它们对应的组件

render((

),document.getElementById('app'))

二 Link

export default React.createClass({
render() {
return (

React Router Tutorial

) } })

这里使用了Link 组件,它可以渲染出链接并使用 to 属性指向相应的路由。

三 嵌套路由

如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。

实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:

{/* url / */} {/* url /repos */} {/* url /repos/123 */}

因此,可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享:

{/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/} ),document.getElementById('app'))

接下来,在App中将children渲染出来:

React Router Tutorial

{/* 注意这里将子组件渲染出来 */}
{this.props.children}
) } // ...

四 有效链接

Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。

About
  • Repos
  • 可以使用 activeStyle 指定有效链接的样式,也可以使用activeClassName指定有效链接的样式类。

    大多数时候,我们并不需要知道链接是否有效,但在导航中这个特性则十分重要。比如:可以在导航栏中只显示合法的路由链接。

    export default React.createClass({
    render() {
    return <Link {...this.props} activeClassName="active"/>
    }
    })

    // ...

  • 可以在NavLink中指定只有 .active 的链接才显示,这样如果路由无效,则该链接就不会出现在导航栏中了。

    五 URL参数

    考虑下面的url:

    /repos/reactjs/react-router /repos/facebook/react

    他们可能对应的是这种形式:

    /repos/:userName/:repoName

    :后面是可变的参数

    url中的可变参数可以通过 this.props.params[paramsName] 获取到:

    export default React.createClass({
    render() {
    return (

    {/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}

    {this.props.params.repoName}

    ) } })
    render((

    {/* 注意这里的路径 带了 :参数 */} ),document.getElementById('app'))

    接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。

    六 默认路由

    // ...

    render((

    {/ 注意这里 /}

    ),document.getElementById('app'))

    这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。

    同理也有 默认链接组件 IndexLink。、

    七 使用Browser History

    前面的例子一直使用的是hashHistory,因为它一直可以运行,但更好的方式是使用Browser History,它可以不依赖哈希端口 (#)。

    首先需要改 index.js:

    render((
    {/ 注意这里 /}

    {/* ... */} ),document.getElementById('app'))

    其次需要 修改webpack的本地服务配置,打开 package.json 添加 –history-api-fallback :

    代码如下:

    最后需要在 index.html中 将文件的路径改为相对路径:

    <script src="/bundle.js">

    这样就去掉了url中的 # 。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章