在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组件来确定路径。
如果找不到路径匹配项，则默认为错误页面。
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组件中，我们没有提供错误页面的任何路径，因为它是switch语句中的最后一个组件。这是switch的默认语句。
网址参数
它有助于向我们动态提供url参数，例如
<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的动态值
如何访问组件中的url参数
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 AboutUsurl参数将在props中可用。我们可以像这样获取它-
const { params } = this.props.match;