当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React路由管理之React Router总结

React路由管理之React Router总结

2018年05月18日  | 移动技术网IT编程  | 我要评论

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组件，可以进行渲染。

// ...
import { router, route, hashhistory } from 'react-router'

render((
 <router history={hashhistory}>
  <route path="/" component={app}/>
 </router>
), document.getelementbyid('app'))

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

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

import about from './modules/about'
import repos from './modules/repos'

render((
 <router history={hashhistory}>
  <route path="/" component={app}/>
  <route path="/repos" component={repos}/>
  <route path="/about" component={about}/>
 </router>
), document.getelementbyid('app'))

二 link

// modules/app.js
import react from 'react'
import { link } from 'react-router'

export default react.createclass({
 render() {
  return (
   <div>
    <h1>react router tutorial</h1>
    <ul role="nav">
     <li><link to="/about">about</link></li>
     <li><link to="/repos">repos</link></li>
    </ul>
   </div>
  )
 }
})

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

三 嵌套路由

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

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

<app>    {/* url /     */}
 <repos>  {/* url /repos   */}
  <repo/> {/* url /repos/123 */}
 </repos>
</app>

因此，可以通过把子组件嵌套到 公共组件 app上使得 app组件上的 导航栏 nav 等公共部分能够共享：

// index.js
// ...
render((
 <router history={hashhistory}>
  <route path="/" component={app}>
   {/* 注意这里把两个子组件放在route里嵌套在了app的route里/}
   <route path="/repos" component={repos}/>
   <route path="/about" component={about}/>
  </route>
 </router>
), document.getelementbyid('app'))

接下来，在app中将children渲染出来：

// modules/app.js
// ...
 render() {
  return (
   <div>
    <h1>react router tutorial</h1>
    <ul role="nav">
     <li><link to="/about">about</link></li>
     <li><link to="/repos">repos</link></li>
    </ul>

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

   </div>
  )
 }
// ...

四 有效链接

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

<li><link to="/about" activestyle={{ color: 'red' }}>about</link></li>
<li><link to="/repos" activestyle={{ color: 'red' }}>repos</link></li>

可以使用 activestyle 指定有效链接的样式，也可以使用activeclassname指定有效链接的样式类。

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

// modules/navlink.js
import react from 'react'
import { link } from 'react-router'

export default react.createclass({
 render() {
  return <link {...this.props} activeclassname="active"/>
 }
})

// modules/app.js
import navlink from './navlink'

// ...

<li><navlink to="/about">about</navlink></li>
<li><navlink to="/repos">repos</navlink></li>

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

五 url参数

考虑下面的url：

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

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

/repos/:username/:reponame

：后面是可变的参数

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

// modules/repo.js
import react from 'react'

export default react.createclass({
 render() {
  return (
   <div>
{/* 注意这里通过this.props.params.reponame 获取到url中的reponame参数的值 */}
    <h2>{this.props.params.reponame}</h2>
   </div>
  )
 }
})


// index.js
// ...
// import repo
import repo from './modules/repo'

render((
 <router history={hashhistory}>
  <route path="/" component={app}>
   <route path="/repos" component={repos}/>
   {/* 注意这里的路径 带了 ：参数 */}
   <route path="/repos/:username/:reponame" component={repo}/>
   <route path="/about" component={about}/>
  </route>
 </router>
), document.getelementbyid('app'))

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

六 默认路由

// index.js
import { router, route, hashhistory, indexroute } from 'react-router'
// and the home component
import home from './modules/home'

// ...

render((
 <router history={hashhistory}>
  <route path="/" component={app}>

   {/* 注意这里* /}
   <indexroute component={home}/>

   <route path="/repos" component={repos}>
    <route path="/repos/:username/:reponame" component={repo}/>
   </route>
   <route path="/about" component={about}/>
  </route>
 </router>
), document.getelementbyid('app'))

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

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

七 使用browser history

前面的例子一直使用的是hashhistory，因为它一直可以运行，但更好的方式是使用browser history，它可以不依赖哈希端口 （#）。

首先需要改 index.js:

// ...
// bring in `browserhistory` instead of `hashhistory`
import { router, route, browserhistory, indexroute } from 'react-router'

render((
{/* 注意这里 */}
 <router history={browserhistory}>
  {/* ... */}
 </router>
), document.getelementbyid('app'))

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

复制代码 代码如下:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 中 将文件的路径改为相对路径：

<!--  -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >

<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>

这样就去掉了url中的 # 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网