Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Preface:

A very simple requirement, the React single-page application, is to redirect to a separate 404 page if a URL does not match within the site.

What I thought was an easy problem to solve at first (actually it was a very simple problem, but I didn’t have enough experience with it), but it didn’t work out for several days.

Here is to record the thoughts.

The relevant code

Effect:

The URL that does not exist in the address bar input station has the same effect.

React-router-dom router-dom router-dom router-dom router-dom router-dom router-dom

<Switch>
  <Route exact path="/">
    <Home />
    </Route>
<Route path="/old-match">
  <Redirect to="/will-match" />
    </Route>
<Route path="/will-match">
  <WillMatch />
  </Route>
<Route path="*">
  <NoMatch />
  </Route>
</Switch>
Copy the code

Router-dom react-router-dom

React Router: Declarative Routing for React.js

Each route corresponds to its own component. If there is no route corresponding to the component, the path is set to *, which means that all routes other than the above route use the component of 404 (NoMatch in the example above).

If there is no match, the display is as follows:

This 404 is actually still in the main business page, replacing the display of the business area with the contents of the 404 page, so it still has the menu.

In most cases, you want to jump to a separate 404 page, completely separate from the main business page.

The main business page and 404 page are level relationship, the main business page is the original processing method, click the menu to display different sub-pages.

Redirect to 404 page when accessing a route that does not exist.

The code is as follows:

A project created using create-react-app

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="helloreact">
    <App />
  </BrowserRouter>.document.getElementById('root'));Copy the code

App.js

import React from 'react';
import { Route, Switch } from 'react-router';
import Home from './home.jsx';
import './App.css';

function App() {
  return (
    <Switch>
      <Route path="/ 404" exact>
        <div>404</div>
      </Route>
      <Route path="/">
        <Home></Home>
      </Route>
    </Switch>
  );
}
​
export default App;
Copy the code

App.js is the parent route, which matches 404 first and displays 404 page after matching. Then you need to define a route that matches /. When matching, the component is displayed on the main service page.

home.jsx

import { Redirect, Route, Switch, Link } from "react-router-dom";

function Home() {
    return (
        <>
            <ul>
                <ul><Link to="/home">Home</Link></ul>
                <ul><Link to="/about">About</Link></ul>
                <ul><Link to="/nomatch">No Router</Link></ul>
            </ul>

            <Switch>
                <Route path="/" exact>
                    <div>Home</div>
                </Route>
                <Route path="/home" exact>
                    <div>Home</div>
                </Route>
                <Route path="/about" exact>
                    <div>About</div>
                </Route>
                <Redirect path="*" to="/ 404"></Redirect>
            </Switch>
        </>
    );
}

export default Home;
Copy the code

Child routes are defined in the home page, and when matched routes are clicked, corresponding components are displayed in the display area (outside the menu).

For example, when you click Home here, the route is/Home and Home is displayed.

Instead of using

, Redirect to 404 instead. If there is no matching Route, the parent Route matches 404 and a separate 404 page is displayed.