React Router的Route的使用

Router是React Router中用于配置路由信息的组件， 每当有一个组件需要根据URL决定是否渲染时，就需要创建一个React

1)Path

每个Route的值是一个组件， 当url和Route匹配时，Component 属性定义的组件就会被渲染。例如：

<Route path="/" component={Foo} />

(2) render

render 的值是一个函数，这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如：

<Route path='/foo' render={(props) => { <Foo {...props} data={extraProps} />}}>
</Route>

Foo 组件接收了一个额外的 data 属性。

（3）children

children 的值也是一个函数，函数返回要渲染的 React 元素。 与前两种方式不同之处是，无论是否匹配成功， children 返回的组件都会被渲染。但是，当匹配不成功时，match 属性为 null。例如:

<Route path='/foo' render={(props) => {
 <div className={props.match ? 'active': ''}>
  <Foo {...props} data={extraProps} />
 </div>
}}>
</Route>

 如果 Route 匹配当前 URL，待渲染元素的根节点 div 的 class 将设置成 active.

转载https://www.cnblogs.com/SharkBin/p/10164787.html