在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 AboutUs

url参数将在props中可用。我们可以像这样获取它-

const { params } = this.props.match;