Detailed explanation of React routing management and use of React Router

This time I will bring you a detailed explanation of React routing management and the use of React Router. What are the precautions for React routing management and the use of React Router? Here are practical cases, let’s take a look.

What does React Router do? The official introduction is:

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. Synchronization, powerful features such as code lazy loading, dynamic route matching, path transition processing, etc. can be realized through a simple API.

The following are some usages of React Router:

A simple rendering Route

There is one thing to keep in mind, Router As a React component, it can be rendered.

// ...
import { Router, Route, hashHistory } from 'react-router'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

HashHistory is used here - it manages the routing history and the hash part of the URL.

Add more routes and specify their corresponding components

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

Link is used here Component, which can render out links and use the to attribute to point to the corresponding route.

Three nested routes

If we want to add a navigation bar, it needs to exist on every page. If there is no router, we need to encapsulate each nav component and reference and render it in each page component. As the application grows the code becomes redundant. React-router provides another way to nest shared UI components.

In fact, our app is a series of nested boxes, and the corresponding url can also illustrate this nested relationship:

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

Therefore, we can use the handle

component Nest

into the public component App so that the navigation bar Nav and other public parts on the App component can be shared:

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

Next, render the children in the App:

// 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>
  )
 }
// ...

Four valid links

One of the differences between the Link component and the a tag is that Link can know whether the path it points to is a valid route.

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

You can use activeStyle to specify the style of an effective link, or you can use activeClassName to specify the style class of an effective link.

Most of the time, we don’t need to know whether the link is valid, but this feature is very important in navigation. For example: you can display only legal routing links in the navigation bar.

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

You can specify in NavLink that only .active links will be displayed, so that if the route is invalid, the link will not appear in the navigation bar.

Five URL parameters

Consider the following url:

/repos/reactjs/react-router

/ repos/facebook/react

They may correspond to this form:

/repos/:userName/:repoName

: followed by variable parameters

The variable parameters in

url

can be obtained through this.props.params[paramsName]:

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

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

Next visit /repos/reactjs/react-router and /repos/ facebook/react will see different content.

6 Default Route

// 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 is added here to specify the default path / corresponding component. Note that it has no path attribute value.

Similarly, there is also the default link component IndexLink. ,

7 Using Browser History

The previous example has always used hashHistory, because it can always run, but a better way is Using Browser History, it does not rely on hashed ports (#).

First you need to change index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

Secondly you need to modify the local service configuration of webpack, open package.json and add –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>

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

推荐阅读：

如何使用AngularJS模态框模板ngDialog

使用Vue.js下载方式案例详解

The above is the detailed content of Detailed explanation of React routing management and use of React Router. For more information, please follow other related articles on the PHP Chinese website!