React Router的Route的使用
Route 是 React Router中用于配置路由信息的组件,每当有一个组件需要根据 URL 决定是否渲染时,就需要创建一个 Route。 1) path 每个 Route 都需要定义一个 path 属性,path 属性是一个url,当 URL 匹配一个 Route 时,这个 Route 中定义的组件就会被渲染出来。 2)Route 渲染组件的方式 (1)component component 的值是一个组件,当 URL 和 Route 匹配时,Component属性定义的组件就会被渲染。例如: <Route path=‘/foo‘ component={Foo} > 当 URL = "http://example.com/foo" 时,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. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |