数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究React.js 中的路由导航
我们有一个 index.js 文件，如下所示：
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ContactUs';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/ aboutus ">Users</Link>
</li>
<li>
<Link to="/ contactus ">Contact</Link>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))现在，我们将在页面上提供链接进行导航，而不是在浏览器中手动输入 url。
react-router-dom 提供的 Link 组件有助于创建不会重新加载页面本身的锚定标记。
如果我们使用 html 提供的默认锚定标记，它将在导航时重新加载页面。但是由于我们只有一个 index.html 页面，并且我们只是导航到其他 jsx 组件，因此我们不必让页面重新加载。
如何添加 404 页面
当给定的 index.jsx 文件中的路由中没有路径匹配时，将显示 404 页面。
让我们为 404 错误创建一个页面。
ErrorPage.jsx
import React from 'react' const ErrorPage = () => <h1>Page Not found</h1> export default ErrorPage
我们将使用 react-router-dom 提供的 switch 组件来确定路径。
如果没有找到匹配的路径，我们将默认使用 Errorpage。
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './AboutUs'
import ContactUs from './ContactUs'
import ErrorPage from './ ErrorPage';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/aboutus">About us</Link>
</li>
<li>
<Link to="/contactus">Contact us</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
<Route component={ErrorPage} />
</Switch>
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));在 switch 组件中，我们没有为 error 页面提供任何路径，因为它是 switch 语句中的最后一个组件。它是 switch 的默认语句。
网址参数
它帮助动态地为我们提供了网址参数，如
<Route path="conatctus/:id" component={ContactUs} />在 index.jsx 文件中
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs '
import ContactUs from './ ContactUs '
import ErrorPage from './ ErrorPage ';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/aboutus">About Us</Link>
</li>
<li>
<Link to="/contactus">Contact Us</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/aboutus/:id" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
<Route component={ErrorPage} />
</Switch>
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));现在我们在 aboutus 网址中有一个动态值，名为 id
如何访问组件中的网址参数
import React from 'react';
class AboutUs extends React.Component {
render() {
const { params } = this.props.match
return (
<div>
<h1>About Us</h1>
<p>{params.id}</p>
</div>
)
}
}
export default AboutUs网址参数可用于 props 中。我们可以获取它，方法如下 -
const { params } = this.props.match;
更新日期：04-Sep-2019
6K+ 浏览量
广告