我刚刚react-router
从v3 替换为v4。
但是我不确定如何以编程方式导航到的成员函数Component
。即在handleClick()
功能上我想导航到/path/some/where
处理一些数据后。我曾经通过以下方式做到这一点:
import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')
但是我在v4中找不到这样的接口。
如何使用v4导航?
如果您定位到浏览器环境,则需要使用react-router-dom
package而不是react-router
。他们按照相同的方法作出反应那样,以核心分开,( react
)和特定于平台的代码,( react-dom
,react-native
用细微的差别,你并不需要安装两个独立的包),这样的环境包包含一切你需要。您可以通过以下方式将其添加到项目中:
yarn add react-router-dom
要么
npm i react-router-dom
您需要做的第一件事是<BrowserRouter>
在应用程序中提供一个作为最顶层的父组件。<BrowserRouter>
使用HTML5 history
API并为您管理它,因此您不必担心自己实例化并将其<BrowserRouter>
作为道具传递给组件(就像在以前的版本中一样)。
在V4中,要以编程方式进行导航,您需要访问history
对象(可通过React 进行访问)context
,只要您将<BrowserRouter>
提供程序组件作为应用程序中最顶层的父对象即可。该库通过上下文公开router
了本身包含history
为属性的对象。该history
接口提供多种导航方法,比如push
,replace
和goBack
,等等。您可以在此处检查属性和方法的完整列表。
发生这种情况是因为使用上下文模型react-router
传递location
给组件。
connect和observer都创建了组件,这些组件的shouldComponentUpdate方法对当前的道具和下一个道具进行了比较。只有更改了至少一个道具后,这些组件才会重新渲染。这意味着,为了确保它们在位置更改时更新,需要为它们提供一个在位置更改时更改的道具。
解决此问题的2种方法是:
<Route />
。当前location
对象是a <Route>
传递给它渲染的组件的道具之一withRouter
高阶组件包装在一起,实际上其效果和注入location
与道具相同抛开这些,有四种编程方式进行导航,并按建议进行排序:
<Route>
组件<Route />
组件被放置在组件层次结构的顶部,必须事先考虑您的路由结构。但是,现在您可以在树中的任何位置拥有 <Route>
组件 ,从而使您可以更好地控制根据URL进行有条件的呈现。 注入 , 并 作为道具添加到组件中。导航方法(如 , , ...)都可以作为属性 对象。 Route
match
location
history
push
replace
goBack
history
有3种方法可以Route
通过使用component
,render
或children
道具来用a渲染某些事物,但在同一内不要使用多个Route
。选择取决于用例,但是基本上前两个选项仅在path
匹配url位置时才呈现组件,而children
无论路径是否匹配位置都将呈现组件(可用于基于URL调整UI匹配)。
如果要自定义组件渲染输出,则需要将组件包装在函数中并使用render
选项,以便将所需的其他道具match
(location
和除外)传递给组件history
。一个例子来说明:
import { BrowserRouter as Router } from 'react-router-dom'
const ButtonToNavigate = ({ title, history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
{title}
</button>
);
const SomeComponent = () => (
<Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)
const App = () => (
<Router>
<SomeComponent /> // Notice how in v4 we can have any other component interleaved
<AnotherComponent />
</Router>
);
withRouter
HoC这个更高阶的成分将注入与相同的道具Route
。但是,它带有一个限制,即每个文件只能有1个HoC。
import { withRouter } from 'react-router-dom'
const ButtonToNavigate = ({ history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
Navigate
</button>
);
ButtonToNavigate.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}),
};
export default withRouter(ButtonToNavigate);
Redirect
组件<Redirect>
会导航到新位置。但是请记住, 默认情况下 ,当前位置会被新位置替换,例如服务器端重定向(HTTP 3xx)。新位置由 to
prop 提供 ,可以是字符串(重定向到的URL)或 location
对象。如果您想 将新条目推送到历史记录中 ,请同时传递一个 push
道具并将其设置为 true
<Redirect to="/your-new-location" push />
router
通过上下文手动访问const ButtonToNavigate = (props, context) => (
<button
type="button"
onClick={() => context.router.history.push('/my-new-location')}
>
Navigate to a new location
</button>
);
ButtonToNavigate.contextTypes = {
router: React.PropTypes.shape({
history: React.PropTypes.object.isRequired,
}),
};
不用说,还有一些其他路由器组件将用于非浏览器生态系统,例如在内存<NativeRouter>
中复制导航堆栈并定位可通过包提供的React Native平台。react-router-native
有关更多参考,请随时查看官方文档。该库的一位共同作者还制作了一个视频,其中对React-router v4进行了非常酷的介绍,重点介绍了一些主要更改。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句