This time I will bring you a detailed explanation of the steps for using React routing management React Router. What are theprecautionsfor 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.

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

import About from './modules/About' import Repos from './modules/Repos' render((      ), document.getElementById('app'))

// modules/App.js import React from 'react' import { Link } from 'react-router' export default React.createClass({ render() { return ( 
 
React Router Tutorial
 
 
About
 
Repos
 
 
 ) } })

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.

 {/* url / */}  {/* url /repos */}  {/* url /repos/123 */}  

component Nest

// index.js // ... render((   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}     ), document.getElementById('app'))

// modules/App.js // ... render() { return ( 
 
React Router Tutorial
 
 
About
 
Repos
 
 {/* 注意这里将子组件渲染出来 */} {this.props.children} 
 ) } // ...

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

// modules/NavLink.js import React from 'react' import { Link } from 'react-router' export default React.createClass({ render() { return  } })

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

Consider the following url:

/ repos/facebook/react

They may correspond to this form:

url

// modules/Repo.js import React from 'react' export default React.createClass({ render() { return ( 
 {/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */} 
{this.props.params.repoName}
 
 ) } })

// index.js // ... // import Repo import Repo from './modules/Repo' render((    {/* 注意这里的路径 带了 ：参数 */}     ), document.getElementById('app'))

// index.js import { Router, Route, hashHistory, IndexRoute } from 'react-router' // and the Home component import Home from './modules/Home' // ... render((   {/* 注意这里* /}        ), document.getElementById('app'))

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(( {/* 注意这里 */}  {/* ... */}  ), document.getElementById('app'))

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

复制代码代码如下:

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

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

这样就去掉了url中的 # 。

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

推荐阅读：

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

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

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