关于react-router:react嵌套路由多重路由重定向重定向到404页面

47次阅读

共计 1072 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0