react -Route exact Redirect


 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>
    )
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM