欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React路由管理之React Router总结

程序员文章站 2022-08-25 13:42:16
react项目通常都有很多的url需要管理,最常使用的解决方案就是react router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。 reac...

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.html中 将文件的路径改为相对路径:

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

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

这样就去掉了url中的 # 。

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