上一章ReactJS实战教程请查看：React使用Fragment
路由是一个过程，在此过程中，用户根据其操作或请求被定向到不同的页面。ReactJS Router主要用于开发单页Web应用程序。React Router用于定义应用程序中的多条路由。当用户在浏览器中输入一个特定的URL时，如果这个URL路径与路由器文件中的任何“路由”匹配，用户将被重定向到这个特定的路由。
React Router是一个构建在React之上的标准库系统，用于使用React路由器包在React应用程序中创建路由。它在浏览器上提供同步URL，其中的数据将显示在web页面上。它维护应用程序的标准结构和行为，主要用于开发单页web应用程序。
React路由的必要性React Router在单页面应用程序中显示多个视图方面起着重要作用。没有React Router，就不可能在React应用程序中显示多个视图。大多数社交媒体网站，如Facebook, Instagram使用React Router来渲染多个视图。
React路由安装React包含三个不同的路由包。这些分别是:

• react-router：它为React路由器应用程序提供核心路由组件和功能。
• react-router-native: 用于移动应用程序。
• react-router-dom: 用于web应用程序设计。

不可能直接在应用程序中安装路由器，要使用react 路由，首先需要在应用程序中安装react-router-dom模块，下面的命令用于安装react路由器dom。

$ npm install react-router-dom --save

React路由中的组件路由组件有两种:
< BrowserRouter>: 用于处理动态URL。
< HashRouter>: 用于处理静态请求。
例子
步骤1: 在我们的项目中，我们将创建另外两个组件，以及已经存在的App.js。
About.js

import React from 'react' class About extends React.Component { render() { return < h1>About< /h1> } } export default About

Contact.js

import React from 'react' class Contact extends React.Component { render() { return < h1>Contact< /h1> } } export default Contact

App.js

import React from 'react' class App extends React.Component { render() { return ( < div> < h1>Home< /h1> < /div> ) } } export default App

步骤2: 对于路由，打开index.js文件并导入其中的所有三个组件文件。在这里，你需要导入代码：import { Route, Link, BrowserRouter as Router } from ‘ react-router-dom’ ，则用于帮助我们实现路由。现在，我们的index.js文件如下所示。
Route是什么？【React路由router作用和用法 – ReactJS实战教程】它用于根据指定的路径定义和渲染组件，它将接受组件并渲染以定义应该渲染什么。
Index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { Route, Link, BrowserRouter as Router } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact'const routing = ( < Router> < div> < h1>React路由例子< /h1> < Route path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

第三步: 打开命令提示符，去你的项目的位置,然后输入npm start，你会首先得到Home的页面。
现在，如果你在浏览器中手动输入:localhost: 3000/about，你将会看到about组件渲染在屏幕上。
步骤4: 在上面的屏幕中，你可以看到，Home组件仍渲染。因为Home路径是“/”而about路径是/about，因此，你可以观察到斜杠在渲染两个组件的两个路径中都很常见。要禁止这种行为，你需要使用exact属性，可以在下面的例子中看到。
Index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { Route, Link, BrowserRouter as Router } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact'const routing = ( < Router> < div> < h1>React路由例子< /h1> < Route exact path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

使用链接组件添加导航有时，我们希望在一个页面上有多个链接。当我们点击某个特定的链接时，它应该加载与该路径相关联的页面，而无需重新加载web页面。为此，我们需要导入index.js文件中的< Link> 组件。
什么是< Link> 组件?
此组件用于创建允许在不同url上导航的链接，并在不重新加载网页的情况下渲染其内容。
例子
Index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { Route, Link, BrowserRouter as Router } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact'const routing = ( < Router> < div> < h1>React路由例子< /h1> < ul> < li> < Link to="/">Home< /Link> < /li> < li> < Link to="/about">About< /Link> < /li> < li> < Link to="/contact">Contact< /Link> < /li> < /ul> < Route exact path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

添加链接后，你可以看到路由在屏幕上渲染。现在，如果你单击About，你将看到URL正在改变，而About组件正在渲染。
现在，我们需要向链接添加一些样式。因此，当我们点击任何特定的链接时，都可以很容易地识别出哪个链接是活动的。要做到这一点，路由器提供了一个新的伎俩NavLink而不是链接。现在，在index.js文件中，替换Navlink中的Link并添加属性activeStyle，activeStyle属性的意思是当我们点击链接时，它应该有一个特定的样式，这样我们就可以区分哪个是当前活动的。

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact'const routing = ( < Router> < div> < h1>React路由例子< /h1> < ul> < li> < NavLink to="/" exact activeStyle={ {color:'red'} }>Home< /NavLink> < /li> < li> < NavLink to="/about" exact activeStyle={ {color:'green'} }>About< /NavLink> < /li> < li> < NavLink to="/contact" exact activeStyle={ {color:'magenta'} }>Contact< /NavLink> < /li> < /ul> < Route exact path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

当我们执行上面的程序时，我们会看到下面的屏幕，我们可以看到主链接是红色的，是目前唯一的活动链接。
现在，当我们点击About链接时，它显示的绿色就是当前活动的链接。
< Link>和< NavLink>
Link组件允许在网站上浏览不同的路由，而NavLink组件用于向活动路由添加样式。
反应路由切换Switch< Switch>组件仅在路径匹配时才用于渲染组件，否则，它将返回not found组件。
要理解这一点，首先，我们需要创建一个notfound组件。
notfound.js

import React from 'react' const Notfound = () => < h1>Not found< /h1> export default Notfound

现在，导入index.js文件中的组件，可以在下面的代码中看到。
Index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact' import Notfound from './notfound'const routing = ( < Router> < div> < h1>React路由例子< /h1> < ul> < li> < NavLink to="/" exact activeStyle={ {color:'red'} }>Home< /NavLink> < /li> < li> < NavLink to="/about" exact activeStyle={ {color:'green'} }>About< /NavLink> < /li> < li> < NavLink to="/contact" exact activeStyle={ {color:'magenta'} }>Contact< /NavLink> < /li> < /ul> < Switch> < Route exact path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < Route component={Notfound} /> < /Switch> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

如果我们手动输入错误的路径，它将给出not found错误。
React路由重定向< Redirect> < Redirect>组件用于在应用程序中重定向到另一个路由，以维护旧的url，它可以放置在路由层次结构中的任何位置。
React中的嵌套路由
嵌套路由允许你在应用程序中呈现子路由。在下面的例子中可以理解。
例子
index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom' import './index.css'; import App from './App'; import About from './about' import Contact from './contact' import Notfound from './notfound'const routing = ( < Router> < div> < h1>React路由例子< /h1> < ul> < li> < NavLink to="/" exact activeStyle={ {color:'red'} }>Home< /NavLink> < /li> < li> < NavLink to="/about" exact activeStyle={ {color:'green'} }>About< /NavLink> < /li> < li> < NavLink to="/contact" exact activeStyle={ {color:'magenta'} }>Contact< /NavLink> < /li> < /ul> < Switch> < Route exact path="/" component={App} /> < Route path="/about" component={About} /> < Route path="/contact" component={Contact} /> < Route component={Notfound} /> < /Switch> < /div> < /Router> ) ReactDOM.render(routing, document.getElementById('root'));

在contact.js文件中，我们需要导入React Router组件来实现子路由。
contact.js

import React from 'react' import { Route, Link } from 'react-router-dom'const Contacts = ({ match }) => < p>{match.params.id}< /p>class Contact extends React.Component { render() { const { url } = this.props.match return ( < div> < h1>Welcome to Contact Page of SRCMINI< /h1> < strong>选择contact Id< /strong> < ul> < li> < Link to="/contact/1">Contacts 1 < /Link> < /li> < li> < Link to="/contact/2">Contacts 2 < /Link> < /li> < li> < Link to="/contact/3">Contacts 3 < /Link> < /li> < li> < Link to="/contact/4">Contacts 4 < /Link> < /li> < /ul> < Route path="/contact/:id" component={Contacts} /> < /div> ) } } export default Contact

React路由器的好处React路由器的优点如下:

• 在这种情况下，没有必要手动设置浏览器历史记录。
• 链接用于导航应用程序中的内部链接，它类似于锚标记。
• 它使用switch特性进行渲染。
• 路由器只需要一个子元素。
• 中指定了每个组件。

推荐阅读

• 

  替换覆盖的文件怎么恢复？Ontrack EasyRecovery Home来帮你！
• 

  Iphone商城退款，苹果商店退款的操作过程
• 

  网络卡是什么原因
• 

  西安刻公章联系电话 西安刻公章的指定地点
• 

  数据分析面试的常见问题,辅警面试常见问题及回答技巧
• 

  名侦探柯南小兰,是谁扮演的
• 

  CAD如何消除重复的线？CAD消除重复线的方法
• 

  干黄花菜如何吃 干黄花菜的吃法
• 

  手链的长度垂到哪里合适 手链垂到什么位置好看
• 

  手机|为什么手机买新不买旧？手机买新不买旧一定是正确的吗？
• 

  空调不怎么制冷是什么原因,有这几个原因
• 

  有哪些男性解乏的小窍门
• 

  帝国时代4德里苏丹精通怎么过 帝国时代4德里苏丹精通过关
• 

  什么是灰枣呢 灰枣有什么作用呢
• 

  优酷会员6周年有哪些奖励 奖励详细介绍
• 

  失望什么意思，希望攒够了就是失望什么意思
• 

  《上古卷轴5：天际》10大彩蛋指南
• 

  养老保险交15年可以退休吗？可以继续缴纳吗
• 

  红南京价格 「为什么红南京抽的人多」
• 

  四字短句 盘点四字短句

• React使用CSS样式化组件的4种方式 &#8211; ReactJS实战教程
• React使用Fragment &#8211; ReactJS实战教程
• React Refs的作用和用法详解 &#8211; ReactJS实战教程
• React key的作用和用法 &#8211; ReactJS实战教程
• React使用列表和map()函数 &#8211; ReactJS实战教程
• React使用5种条件渲染 &#8211; ReactJS实战教程
• React事件和事件处理 &#8211; ReactJS实战教程
• React表单form用法 &#8211; ReactJS实战教程
• React受控组件和非受控组件之间的区别 &#8211; ReactJS实战教程