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.

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

React Router的Route的使用相关推荐

React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
React Router教程–如何使用代码示例渲染，重定向，切换，链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
[React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a "dirty" state and we want t ...
[React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
React Router 黑笔记？
我横竖睡不着,字里行间看出2个字.... 首先,在该项目开始之前,还请大家能够先下载一个项目脚手架.本教程基于该脚手架进行开发先看文件大致架构渲染 Route (index.js 启动的compo ...

React Router的Route的使用

React Router的Route的使用相关推荐

最新文章

热门文章