React routing management React Router usage steps detailed-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps for using React routing management React Router. What are the precautions for using React routing management React Router? The following is a practical case, let's take a look.

React projects usually have a lot of URLs that need to be managed. The most commonly used solution is React Router. I have studied it recently, mainly by reading the official English documentation and summarizing it for future reference. .

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

// modules/App.js
import NavLink from './NavLink'
// ...
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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 (#).

首先需要改 index.js:

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

Copy after login

其次需要修改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>

Copy after login

这样就去掉了url中的 # 。

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