BrowserRouter
basename: string
所有位置的基准 URL。如果你的应用程序部署在服务器的子目录,则需要将其设置为子目录。basename 的正确格式是前面有一个前导斜杠,但不能有尾部斜杠。
例子:
效果:
forceRefresh: bool
如果为 true ,在导航的过程中整个页面将会刷新。一般情况下,只有在不支持 HTML5 history API 的浏览器中使用此功能。
例子:
const supportsHistory = 'pushState' in window.history;
getUserConfirmation: func
用于确认导航的函数,默认使用 window.confirm。例如,当从 /a 导航至 /b 时,会使用默认的 confirm 函数弹出一个提示,用户点击确定后才进行导航,否则不做任何处理。译注:需要配合
// 这是默认的确认函数
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message);
callback(allowTransition);
}
KeyLength:数字,设置Location.Key的长度;
使用 URL 的 hash 部分(即 window.location.hash)来保持 UI 和 URL 的同步。
basename,getUserConfirmation和BrowserRouter功能一样
hashType: string
window.location.hash 使用的 hash 类型,有如下几种:
slash - 后面跟一个斜杠,例如 #/ 和 #/sunshine/lollipops
noslash - 后面没有斜杠,例如 # 和 #sunshine/lollipops
hashbang - Google 风格的 ajax crawlable,例如 #!/ 和 #!/sunshine/lollipops
默认为 slash。
为你的应用提供声明式的、可访问的导航链接。
注:必须要有to属性,否则页面报错
this.props.history.push({ pathname:"/inbox", query:{ name:"inbox", myas:"哈哈" } })
About
to: string
一个字符串形式的链接地址,通过 pathname、search 和 hash 属性创建。
to: object
一个对象形式的链接地址,可以具有以下任何属性:
pathname - 要链接到的路径
search - 查询参数
hash - URL 中的 hash,例如 #the-hash
state - 存储到 location 中的额外状态数据
replace: bool
当设置为 true 时,点击链接后将替换历史堆栈中的当前条目,而不是添加新条目。默认为 false。
一个特殊版本的 ,它会在与当前 URL 匹配时为其呈现元素添加样式属性。
About
activeClassName: string
当元素处于激活状态时应用的类,默认为 active。它将与 className 属性一起使用。
FAQs
activeStyle: object
当元素处于激活状态时应用的样式。
const activeStyle = {
fontWeight: 'bold',
color: 'red'
};
FAQs
用于在位置跳转之前给予用户一些确认信息。当你的应用程序进入一个应该阻止用户导航的状态时(比如表单只填写了一半),弹出一个提示。
import { Prompt } from 'react-router-dom';
message: string
当用户试图离开某个位置时弹出的提示信息。
message: func
将在用户试图导航到下一个位置时调用。需要返回一个字符串以向用户显示提示,或者返回 true 以允许直接跳转。
{
const isApp = location.pathname.startsWith('/app');
return isApp ? `你确定要跳转到${location.pathname}吗?` : true;
}} />
when: bool
在应用程序中,你可以始终渲染
译注:when 只有两种情况,当它的值为 true 时,会弹出提示信息。如果为 false 则不会弹出。
使用
import { Route, Redirect } from 'react-router-dom';
(
loggedIn ? (
) : (
)
)} />
to: string
要重定向到的 URL。
to: object
要重定向到的位置,其中 pathname 可以是能够理解的任何有效的 URL 路径。
例中的 state 对象可以在重定向到的组件中通过 this.props.location.state 进行访问。
push: bool
如果为 true,重定向会将新的位置推入历史记录,而不是替换当前条目。
exact:bool
如果为 true,则只有在 path 完全匹配 location.pathname 时才匹配。
path: string
没有定义 path 的
render: func
使用 render 可以方便地进行内联渲染和包装,而无需进行上文解释的不必要的组件重装。
// 方便的内联渲染
Home} />
component
指定只有当位置匹配时才会渲染的 React 组件,该组件会接收 route props 作为属性。
const User = ({ match }) => {
return Hello {match.params.username}!
}
children: func
有时候不论 path 是否匹配位置,你都想渲染一些内容。在这种情况下,你可以使用 children 属性。除了不论是否匹配它都会被调用以外,它的工作原理与 render 完全一样。
children 渲染方式接收所有与 component 和 render 方式相同的 route props,除非路由与 URL 不匹配,不匹配时 match 为 null。这允许你可以根据路由是否匹配动态地调整用户界面。如下所示,如果路由匹配,我们将添加一个激活类:
const ListItemLink = ({ to, ...rest }) => (
(
)} />
)
这对动画也很有用:
(
{/* Animate 将始终渲染,因此你可以利用生命周期来为其子元素添加进出动画 */}
{match && }
)} />
警告:
组件中
1) path
每个 Route 都需要定义一个 path 属性,当使用 BrowserRouter 时,path 用来描述这个Router匹配的 URL 的pathname;当使用 HashRouter时,path 用来描述这个 Route 匹配的 URL 的 hash。例如,使用 BrowserRouter 时,
2) match
当 URL 和 Route匹配时,Route 会创建一个 match 对象作为 props 中的一个 属性传递给被渲染的组件。这个对象包含以下4个属性。
(1)params: Route的 path 可以包含参数,例如
(3)path: Route 的 path 属性,构建嵌套路由时会使用到。
(4)url: URL 的匹配的方式
3) history对象
history对象通常具有以下属性和方法:
length : (number)历史堆栈中的条目数
action : (string)当前动作(PUSH,REPLACE或POP)
location : (object) 当前位置。
具有以下属性:
pathname: URL的路径
search: URL查询字符串
hash: URL哈希片段
state: 位置特定的状态被提供给例如。当这个位置被推到堆栈上时,push(路径,状态)。仅在浏览器和内存历史记录中可用。
push : (path, [state]) - (function) 将新条目推入历史堆栈
replace : (path, [state]) - (function) 替换历史堆栈上的当前条目
go(n) : (function) 将历史堆栈中的指针移动n个条目
goBack() : (function) 相当于 go(-1)
goForward() : (function) 相当于 go(1)
block : (function) 防止导航
用于渲染与路径匹配的第一个子
这与仅仅使用一系列
如果 URL 是 /about,那么
但是,有时候我们只想选择一个
import { Switch, Route } from 'react-router';
现在,当我们在 /about 路径时,
这对于动画转换也很有用,因为匹配的
{/* 这里只会渲染一个子元素 */}
{/* 这里总是会渲染两个子元素,也有可能是空渲染,这使得转换更加麻烦 */}
location: object
用于匹配子元素而不是当前历史位置(通常是当前的浏览器 URL)的 location 对象。
children: node
所有
当在
如果给
withRouter
您可以通过withRouter高阶组件访问历史对象的属性和最接近的