該 <Link> 來自react-router-dom不會更改URL

Question

我目前正在制作網站，並為此碰壁。 我正在使用react-router-dom路由我的應用程序，這有點陌生，但是在一頁中，我在頁面上放置的鏈接不會更改URL

我已經嘗試過上一個組件，在該組件中，我將按鈕放在一個組件上，然后使用Link根據給定的Link和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

您不應該從react-router-dom導入BrowserRoute作為Link 。 兩者是不同的東西。 您需要直接從react-router-dom導入Link 。 休息，它應該工作牢固。

您應該以這種方式導入link ：

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

現在，我不確定您的應用程序到底發生了什么。 但是在這里 ，我使用CodeSandBox創建了一個非常基本的演示或正常工作的react-router。 您可以看一下，它應該可以幫助您解決遇到的問題。

另外，您可以閱讀本文以進一步了解React Router的工作原理。

Answer 2

您的代碼不起作用，因為您已在Link標記內添加了按鈕，因此在單擊按鈕時，React僅觸發按鈕的onClick方法，並且不會單擊鏈接！

因此，在解決方案中，您可以從鏈接標簽中刪除按鈕

<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中獲取歷史記錄對象。