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

Posted 2021-09-13 天渺工作室

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