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;