React Router生成的链接被禁止默认

Question

我开始在我的代码中使用react路由器，但<Link>甚至<a>标签生成的所有链接都不起作用。当我在这些链接上按住鼠标时，我可以看到URL，这是正确的，但是当我点击它们时没有任何反应。我的意思是浏览器中的URL不会改变。好像我用e.preventDefault！由于我是使用React Router的新手，我想我错过了一些东西。

这是代码的一部分（完整代码非常长）：

index.js：

<Router>
 ...
 <Menu />
 ...
 <Switch>
     <Route path='/smodel/datasource' component={DataSource}/>
 </Switch>
 ...
</Router>

menu.js

<Link to="/smodel/datasource">New</Link>;

我在两个页面中都使用withRouter函数进行连接，因为我使用了redux。

Answer 1

您需要重新构建代码，例如：

...
 <Menu />
 ...
<Router>
 <Switch>
     <Route path='/smodel/datasource' component={DataSource}/>
 </Switch>
</Router>

在<Menu />内部有<Router />需要有<Route />，但实际情况并非如此。你只是分配链接，所以他们需要在<Router />之外。

<Router />可以有<Switch />和<div />或任何元素，可以用<Route />s嵌套在里面。