Rumah > hujung hadapan web > tutorial js > React路由管理React Router使用步骤详解

React路由管理React Router使用步骤详解

php中世界最好的语言
Lepaskan: 2018-05-22 11:17:12
asal
2336 orang telah melayarinya

这次给大家带来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组件,可以进行渲染。

1

2

3

4

5

6

7

// ...

import { Router, Route, hashHistory } from 'react-router'

render((

 <Router history={hashHistory}>

  <Route path="/" component={App}/>

 </Router>

), document.getElementById('app'))

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

9

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'))

Salin selepas log masuk

二 Link

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// modules/App.js

import React from 'react'

import { Link } from 'react-router'

export default React.createClass({

 render() {

  return (

   <p>

    <h1>React Router Tutorial</h1>

    <ul role="nav">

     <li><Link to="/about">About</Link></li>

     <li><Link to="/repos">Repos</Link></li>

    </ul>

   </p>

  )

 }

})

Salin selepas log masuk

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

三 嵌套路由

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

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

1

2

3

4

5

<App>    {/* url /     */}

 <Repos>  {/* url /repos   */}

  <Repo/> {/* url /repos/123 */}

 </Repos>

</App>

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

// 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'))

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// modules/App.js

// ...

 render() {

  return (

   <p>

    <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}

   </p>

  )

 }

// ...

Salin selepas log masuk

四 有效链接

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

1

2

<li><Link to="/about" activeStyle={{ color: &#39;red&#39; }}>About</Link></li>

<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>Repos</Link></li>

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

// modules/NavLink.js

import React from 'react'

import { Link } from 'react-router'

export default React.createClass({

 render() {

  return <Link {...this.props} activeClassName="active"/>

 }

})

Salin selepas log masuk

1

2

3

4

5

// modules/App.js

import NavLink from './NavLink'

// ...

<li><NavLink to="/about">About</NavLink></li>

<li><NavLink to="/repos">Repos</NavLink></li>

Salin selepas log masuk

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

五 URL参数

考虑下面的url:

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

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

/repos/:userName/:repoName

:后面是可变的参数

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

1

2

3

4

5

6

7

8

9

10

11

12

// modules/Repo.js

import React from 'react'

export default React.createClass({

 render() {

  return (

   <p>

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

    <h2>{this.props.params.repoName}</h2>

   </p>

  )

 }

})

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 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'))

Salin selepas log masuk

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

六 默认路由

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 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'))

Salin selepas log masuk

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

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

七 使用Browser History

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

首先需要改 index.js:

1

2

3

4

5

6

7

8

9

// ...

// bring in `browserHistory` instead of `hashHistory`

import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((

{/* 注意这里 */}

 <Router history={browserHistory}>

  {/* ... */}

 </Router>

), document.getElementById('app'))

Salin selepas log masuk

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

复制代码 代码如下:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

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

1

2

3

4

5

<!-- index.html -->

<!-- index.css 改为 /index.css -->

<link rel="stylesheet" href="/index.css" rel="external nofollow" >

<!-- bundle.js 改为 /bundle.js -->

<script src="/bundle.js"></script>

Salin selepas log masuk

这样就去掉了url中的 # 。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

AngularJS模态框模板ngDialog使用案例分享

Node.js使用对话框ngDialog实现步骤详解

Atas ialah kandungan terperinci React路由管理React Router使用步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan