React 路由器
路由是一个过程，在此过程中，用户将根据其操作或请求将其定向到不同的页面。 ReactJS Router主要用于开发单页Web应用程序。 React Router用于在应用程序中定义多个路由。当用户在浏览器中输入特定的URL，并且此URL路径与路由器文件中的任何"路由"匹配时，该用户将被重定向到该特定的路由。
React Router是标准库系统构建在React之上，并用于使用React Router Package在React应用程序中创建路由。它为浏览器上的同步URL提供了将在网页上显示的数据。它保持了应用程序的标准结构和行为，主要用于开发单页Web应用程序。
React Router的需要
React Router在以下方面起着重要作用: 在单个页面应用程序中显示多个视图。没有React Router，就无法在React应用程序中显示多个视图。大多数社交媒体网站，如Facebook，Instagram，都使用React Router呈现多个视图。
React Router安装
React包含三个不同的路由包。这些是:
react-router: 它为React Router应用程序提供了核心路由组件和功能。
react-router-native: 用于移动应用程序。
react-router-dom: 用于Web应用程序设计。
无法在您的应用程序中直接安装react-router。要使用React路由，首先，您需要在应用程序中安装react-router-dom模块。以下命令用于安装React Router dom。
$ npm install react-router-dom--save
React Router中的组件
路由器组件有两种类型:
<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文件并导入其中的所有三个组件文件。在这里，您需要导入以下行: 从" react-router-dom" 导入{Route，Link，BrowserRouter as Router} ，这有助于我们实现路由。现在，我们的index.js文件如下所示。
什么是Route？
它用于根据指定的路径定义和渲染组件。它将接受组件并进行渲染以定义应渲染的内容。
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 Router Example</h1>
<Route path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
步骤3: : 打开命令提示符，转到您的项目位置，然后键入 npm start 。您将获得以下屏幕。
现在，如果您手动输入,在浏览器 localhost:3000/about 中，您将在屏幕上看到 About 组件。
步骤4: : 在以上屏幕中，您可以看到 Home 组件仍在呈现。这是因为主路径是'/'，而about路径是'/关于'，因此您可以看到斜线在这两种路径中都是相同的呈现两个组件的路径。要停止这种行为，您需要使用 exact Props。在下面的示例中可以看到。
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 Router Example</h1>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
输出
添加使用链接组件进行导航
有时，我们希望在单个页面上需要多个链接。当我们单击任何特定的链接时，它应加载与该路径关联的页面，而无需重新加载该网页。为此，我们需要在 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 Router Example</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'));
输出
添加链接后，您可以看到路线已呈现在屏幕上。现在，如果单击关于，您将看到URL正在更改并且呈现了About组件。
现在，我们需要在链接中添加一些样式。因此，当我们单击任何特定链接时，可以很容易地识别哪个链接活动。为此，路由器提供了一个新的技巧 NavLink 而不是 Link 。现在，在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 Router Example</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'));
输出
当我们执行上述程序时，将显示以下屏幕，在其中可以看到 Home 链接是彩色的红色，并且是当前唯一的活动链接。
现在，当我们单击关于链接时，其颜色显示为绿色，即当前的活动链接。
<Link>与<NavLink>
链接组件允许浏览网站上的不同路线，而NavLink组件用于向活动路线添加样式。
React路由器开关
组件仅在路径匹配时才用于渲染组件。否则，它将返回到未找到组件。
要了解这一点，首先，我们需要创建一个未找到组件。
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 Router Example</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'));
输出
如果手动输入错误路径，则会出现未找到的错误。
React路由器
<重定向>
<重定向>
组件用于重定向到我们应用程序中的另一条路由来维护旧的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 Router Example</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</h1>
<strong>Select 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 Router的优点
React Router的优点如下:
在这种情况下，无需手动设置浏览器历史记录。
链接用于导航应用程序中的内部链接，它类似于锚标签。
它使用切换功能进行渲染。
路由器仅需要单个子元素。
