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

Question

我开始在我的代码中使用反应路由器，但是<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>

在<Router /> 内有<Menu /> 需要有<Route />，但事实并非如此。您只是分配链接，因此它们需要位于 <Router /> 之外。

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