exact是Route下的一個屬性,react路由會匹配到所有能匹配到的路由組件,exact能夠使得路由的匹配更嚴格一些(exact的值為bool型)。
<Route path='/' component={Home} />
<Route path='/page' component={Page}>
//這種情況下,如果匹配路由path='/page',那么會把Home也會展示出來。
//既路由path='/page'會匹配路由path='/'和路由path='/page'
<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />
//這樣匹配路由path='/page',只會匹配到Page組件
<Redirect exact from='/' to='/profile'/>
當用戶訪問某界面時,該界面並不存在,此時用Redirect重定向,重新跳到一個我們自定義的組件里。
Redirect 重定向要放在Switch的最后一句
export default class RouteConfig extends Component { render () { return ( <HashRouter> <Switch> <Route path="/profile" exact component= {profile}/> <Route path="/login" component= {login}/> <Route path="/info" component= {info}/> <Route path="/msite" component= {msite}/> <Route path="/setuser" component= {setUser}/> <Route path="/shop/:id" component= {shop}/> <Route path="/food/:geohash/:id/:title" component= {food}/> <Route path="/technology" component= {technology}/> <Redirect exact from='/' to='/profile'/> //Redirect 重定向要放在Switch的最后一句 </Switch> </HashRouter> ) } }