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

Home

Web Front-end

JS Tutorial

React routing management React Router usage steps detailed

php中世界最好的语言

May 22, 2018 am 11:17 AM

react router routing

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中文网其它相关文章！

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1653

CakePHP Tutorial

1413

Laravel Tutorial

1306

PHP Tutorial

1251

C# Tutorial

1224

Related knowledge

PHP, Vue and React: How to choose the most suitable front-end framework? Mar 15, 2024 pm 05:48 PM

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Java Apache Camel: Building a flexible and efficient service-oriented architecture Feb 19, 2024 pm 04:12 PM

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

Integration of Java framework and front-end React framework Jun 01, 2024 pm 03:16 PM

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

How to use Golang functions to handle web request routing May 02, 2024 am 10:18 AM

In Golang, using functions to handle web request routing is an extensible and modular method of building APIs. It involves the following steps: Install the HTTP router library. Create a router. Define path patterns and handler functions for routes. Write handler functions to handle requests and return responses. Run the router using an HTTP server. This process allows for a modular approach when handling incoming requests, improving reusability, maintainability, and testability.

React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

React and the Frontend: Building Interactive Experiences Apr 11, 2025 am 12:02 AM

React is the preferred tool for building interactive front-end experiences. 1) React simplifies UI development through componentization and virtual DOM. 2) Components are divided into function components and class components. Function components are simpler and class components provide more life cycle methods. 3) The working principle of React relies on virtual DOM and reconciliation algorithm to improve performance. 4) State management uses useState or this.state, and life cycle methods such as componentDidMount are used for specific logic. 5) Basic usage includes creating components and managing state, and advanced usage involves custom hooks and performance optimization. 6) Common errors include improper status updates and performance issues, debugging skills include using ReactDevTools and Excellent

React vs. Vue: Which Framework Does Netflix Use? Apr 14, 2025 am 12:19 AM

Netflixusesacustomframeworkcalled"Gibbon"builtonReact,notReactorVuedirectly.1)TeamExperience:Choosebasedonfamiliarity.2)ProjectComplexity:Vueforsimplerprojects,Reactforcomplexones.3)CustomizationNeeds:Reactoffersmoreflexibility.4)Ecosystema

See all articles