共计 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;
正文完
发表至: react-router
2021-05-09