React nested routines redirect (multiple routes) to 404 pages and redirect routes

In React, the core of route redirection is the Redirect and Switch, regardless of the single-layer route or multi-layer route

import { HashRouter,BrowserRouter, Route,Router, Link, Redirect, Switch} from "react-router-dom"; import Header from './components/Header'; import Login from './page/Login/index'; import Register from './page/Login/register'; import RemakePassWord from './page/Login/remakePassWord'; import HomeIndex from './page/Login/HomeIndex'; import List from './page/Login/List'; import Error from './page/Login/Error'; Const App=() =>{return (<div className="App"> <BrowserRouter>{/* Hash router or Browser as required */} <Header/> <Switch> {/* */} <Route exact path="/" Component ={Login} /> <Route path="/register" Component ={Register} /> <Route path="/remakePassWord" component={remakePassWord} /> {/* Layer 1 Route Redirect Redirect to Login */} <Redirect To ="/" /> {/* Layer-2 routing */} <Route path="/main" > <Switch>{/* Layer-2 routing */} <Route path="/main/homeIndex" component={HomeIndex} /> <Route path="/main/list" component={List} /> <Route path="/main/404" component={Error} /> {/* <Redirect to="/main/404" /> </Switch> </Route> </Switch> </BrowserRouter> </div> ); }... export default App;Copy the code