版本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;