如何在给定以下包的情况下以编程方式重定向到URL:
"react-dom": "^15.5.4","react-redux": "^5.0.4","react-router-dom": "^4.1.1","react-router-redux": "^5.0.0-alpha.6",
我有这个工作:
import React from 'react'; import createBrowserHistory from 'history/createBrowserHistory'; class WorkPlacePage extends React.Component { render() { const history = createBrowserHistory(); return ( <div> <button onClick={() => history.push('/welcome/skills')}>next page</button> </div> ); } } export default WorkPlacePage;
上面的问题是,当浏览器的URL发生变化时,react应用程序似乎并未将URL更改视为重定向.应该由URL触发的react应用程序组件永远不会像url硬刷新时那样运行react组件逻辑…
如何以编程方式触发React App加载新URL的URL重定向?
谢谢!
如果使用较新的react-router API,则需要在组件内部使用this.props中的历史记录,这样:
this.props.history.push('/some/path');
但是,这可能仅用于以编程方式更改URL,而不是实际导航到页面.您应该在路由器配置文件中将组件映射到此URL,如下所示.
<BrowserRouter> <div> <Switch> <Route path="/some/path" component={SomeComponent} /> <Route path="/" component={IndexComponent} /> </Switch> </div> </BrowserRouter>
希望这可以帮助.快乐的编码!