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>
  <route></route>
 </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>
  <route></route>
  <route></route>
  <route></route>
 </router>
), document.getElementById('app'))

二Link

// modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return (
   <p>
    </p><h1 id="React-Router-Tutorial">React Router Tutorial</h1>
    

     
• About
     
• Repos
    

   

  )  } })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></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>
  <route>
   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
   <route></route>
   <route></route>
  </route>
 </router>
), document.getElementById('app'))

Next, render the children in the App:

// modules/App.js
// ...
 render() {
  return (
   <p>
    </p><h1 id="React-Router-Tutorial">React Router Tutorial</h1>
    

     
• About
     
• Repos
    

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

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.

About

Repos

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

// modules/App.js
import NavLink from './NavLink'
// ...

About

Repos

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参数的值 */}
    </p><h2 id="this-props-params-repoName">{this.props.params.repoName}</h2>
   
  )
 }
})

// index.js
// ...
// import Repo
import Repo from './modules/Repo'
render((
 <router>
  <route>
   <route></route>
   {/* 注意这里的路径 带了 ：参数 */}
   <route></route>
   <route></route>
  </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>
  <route>
   {/* 注意这里* /}
   <indexroute></indexroute>
   <route>
    <route></route>
   </route>
   <route></route>
  </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>
  {/* ... */}
 </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>
<!-- bundle.js 改为 /bundle.js -->
<script></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!