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；