react的Router的exact、path、component、strict属性


type Location = { //这是一个location
pathname: Pathname;
search: QueryString;
query: Query;
state: LocationState;
action: Action;
key: LocationKey;
};
class App extends React.Component{
render(){
var query ={
pathname:'/Home', //当为exact或strict时,此处的pathname跟Route里的path要一致
query:'这是query传值'
}
return(
<div>
<h1>这是一个根路由</h1>
<ul>
<li><Link to={query}>Home</Link></li>
<li><Link to={{
pathname: '/Download',
state:'这是state传值'
}}>Download</Link>
</li>
<li><Link to='/About/这是通配符传值'>About</Link></li>
</ul>
</div>
)
}
}

export default App;

exact:一般而言,react路由会匹配所有匹配到的路由组件,exact能够使得路由的匹配更严格一些。exact的值为bool型,为true是表示严格匹配,要求路径与location.pathname必须完全匹配,且会比较匹配过的路由是否和正匹配的路由一致,为false时为正常匹配。

        如在exact为true时,’/link’与’/’是不匹配的,但是在false的情况下它们又是匹配的。

<Route path='/' component={App} />
<Route path='/Home' component={Home} />
<Route path='/About' component={About} />

​//这种情况下,如果点击Home,匹配路由path='/Home',那么会把App也会展示出来。

<Route exact path='/' component={App} />
<Route path='/Home' component={Home} />
<Route path='/About' component={About} />
//这种情况,如果点击Home,匹配路由path='/Home',那么App就不会展示出来
path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
component表示路径对应显示的组件。
strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;

原文地址:https://www.cnblogs.com/ranyonsue/p/14649102.html