第七步:Redirect
有时候我们需要在用户访问旧路径时自动重定向到新路径,这时候就用到 Redirect
组件了。
// App.js import React from 'react'; import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; import Home from './Home'; import UserProfile from './UserProfile'; function App() { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/user/:username" component={UserProfile} /> <Redirect from="/old-path" to="/new-path" /> </Router> ); } export default App;
第八步:Switch
Switch
组件用于只匹配第一个符合条件的路由,防止多个路由同时匹配。
// App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import UserProfile from './UserProfile'; function App