Question

当我尝试以编程方式更改视图时，它仅更改网址，而不是视图。

我有什么：

import createHistory from 'history/createBrowserHistory';
const history = createHistory();

我将点击监听器绑定到某个元素：

<div onClick={this.navigateMeToHome}>To Home</div>

当我听到这个时：

navigateMeToHome = () => {
   history.push('/')
}

网址已更改为主网址，但路由视图仍然相同。

出了什么问题，我该如何解决？

UPD：而这个组件外部Switсh：

<div>
  <BrowserRouter>
    <div>
    <Header/> <=== This guy.
    <div className="container">
     <div className="app">
     <Switch>
       <Route exact path="/" render={props => <Home {...props}/>}/>
       <Route path="/search" component={Search}/>
     </Switch>
    </div>
    </div>
   </div>
 </BrowserRouter>
</div>

Answer 1

我将首先研究三件事。

您只是只是使用ReactTraining / history吗？如果是这样，那只是控制浏览器历史记录。它对进出视图的组件的路由没有影响。
如果您正在使用react-router，react-router-dom等，请确保您的路由嵌套在ReactTraining的路由器库提供的组件内。还有其他方法可以切换视图，但Switch是最简单的实现之一。
确保您在某处存储此转换的状态。原因是，如果状态没有改变，那么持有不同视图的组件没有理由触发重新渲染，将您正在查看的视图放入视图中。

React router v4不会切换视图

1 个答案: