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