javascript - 使用 browserHistory.push 动态更改路由不适用于 react-router v4

Question

我尝试在函数中做一个简单的重定向...

我试过这个:

Router.browserHistory.push('/dashboard');

但后来我得到了这个错误:

Uncaught TypeError: Cannot read property 'push' of undefined

我的失败是什么？

Answer 1

创建一个新的 browserHistory不会工作，因为 <BrowserRouter>创建自己的历史实例，并监听它的变化。所以不同的实例将更改 url 但不会更新 <BrowserRouter>.

browserHistory不可用形式 react-router-dom来自 v4 的包裹, 并分隔为 history包裹。

使用 WithRouter 导航

您可以使用 withRouter高阶分量和 navigate与 history Prop

来自 official documentation

您可以访问历史对象的属性和最近的 <Route>'s通过 withRouter 匹配高阶分量。 withRouter每次使用与 <Route> 相同的 props 更改路由时都会重新渲染其组件呈现 props: { match, location, history }.

示例片段

import {withRouter} from "react-router"; 

class MyComponent extends React.Component {
   ...
   changeRoute = () => {
        this.props.history.push('/dashboard)
   }
   ...
}


 export default withRouter(MyComponent);

另请参阅此答案以获取有关 react-router-v4 中嵌套和动态路由的更多信息

Nesting routes and dynamically routing in React-router v4