Question

我目前正在建立一个网站，并为此碰壁。我正在使用react-router-dom路由我的应用程序，这有点陌生，但是在一页中，我在页面上放置的链接不会更改URL

我已经尝试过上一个组件，在该组件中，我将按钮放在一个组件上，然后使用Link根据给定的Link and Route加载另一个组件。但是，在这一点上，尽管使用了与以前类似的结构，但是根本不起作用

这是加载页面的代码。我已经从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导入Link作为react-router-dom。两者是不同的东西。您需要直接从Link导入react-router-dom。休息，它应该可以正常工作。

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

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

现在，我不确定您的应用程序到底发生了什么。但是here，我已经使用CodeSandBox创建了一个非常基本的演示或正常工作的react-router。您可以看一下，它应该可以帮助您解决遇到的问题。

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

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中获取历史记录对象。

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

2 个答案: