react嵌套路由(多重路由)重定向,重定向到404页面,路由重定向

版本react-router V5（V6版本已经取消Switch了）

在react 中,路由重定向的核心就是Redirect和Switch ,不论是单层路由还是多层

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>{/* 哈希router还是Browser随需求*/}

      <Header/>

      <Switch>
        {/* 想要重定向匹配准确  Switch必须加  Switch只显示匹配到的第一个路由*/}
          <Route exact path="/" component={Login} />
          <Route  path="/register" component={Register} />
          <Route  path="/remakePassWord" component={RemakePassWord} />
          {/* 一层路由重定向 重定向到Login */}
          <Redirect to="/" />

             {/*二层路由*/}
              <Route   path="/main" >
                    <Switch>{/*二层想要重定向准确 二层Switch也是必须加的 */}
                          <Route  path="/main/homeIndex" component={HomeIndex} />
                          <Route  path="/main/list" component={List} />   
                          <Route  path="/main/404" component={Error} />  
                          {/* 二层路由重定向 重定向到Error页面 写/main/404和404都行 */}
                          <Redirect to="/main/404" />
                    </Switch>
              </Route>

      </Switch>     
      </BrowserRouter>
    </div>
  );
}

...

export default App;

image.gif