react-router-dom 中的 <Link> 不会更改 URL

Question

我目前正在制作一个网站，但遇到了困难。我正在使用 react-router-dom 来路由我的应用程序，并且对它有点新，但是在一个页面中，我放在页面上的链接不会更改 URL

我已经尝试过上一个组件，其中我将按钮放在一个组件上，然后使用链接根据给定的链接和路由加载另一个组件。然而，在这个上，尽管使用与以前类似的结构，但根本不起作用

这是加载页面的代码。我已经从 react-router-dom 导入 BrowserRouter 作为链接

<div>
  <p>TEST</p>
   <Link to="/leadslist"><button class="btn btn-success">Back to Leads List</button></Link>
</div>

这是目标页面

            <div>
            <Router>
                <Switch>
                    <Redirect from="/leads" to="/leadslist" />
                    <Route path="/leadsForm" component={LeadsForm} />
                    <Route path="/leadslist" component={LeadsList} />
                    <Route path="/leaddetails" component={LeadsDetails}/>
                 </Switch>
            </Router>
            </div>

我之前尝试单击从“/leadslist”到“/leadsForm”的按钮确实有效，但后来我尝试加载到“leaddetails”以尝试返回“/leadslist”，但它不会更改 URL一点也不。任何帮助将不胜感激。

Answer 1

您不应将BrowserRoute 从react-router-dom 导入为Link。两者都是不同的东西。您需要直接从react-router-dom 导入Link。休息一下，它应该可以正常工作。

您应该以这种方式导入link：

import { Link } from "react-router-dom";

现在，我不确定您的应用到底发生了什么。但是here，我创建了一个非常基本的演示或使用 CodeSandBox 工作的反应路由器。你可以看看，它应该可以帮助你解决你遇到的问题。

另外，您可以阅读此article 以进一步了解 React 路由器的工作原理。

Answer 2

您的代码不起作用，因为您在 Link 标记中添加了按钮，因此单击按钮 React 只会触发按钮的 onClick 方法，并且不会单击 Link！

所以在解决方案中，您可以从链接标签中删除一个按钮

<Link to="/leadslist">Back to Leads List</Link>

或者你可以使用下面的解决方案，

您应该这样做，而不是在链接中添加按钮，

import withRouter from 'react-router-dom'   
const Component = (props) => {
    <div>
        <Button onClick={()=>props.history.push('/leadslist')}
    </div>
  }
export default withRouter(Component)

将 HOC withRouter 添加到您的组件中，您可以在 prop 中获取历史对象。