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

标签：var   key   down   about   state   route   没有   mil   通配符   

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；

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

标签：var   key   down   about   state   route   没有   mil   通配符   

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