首頁猿問如果同一組件有許多路由，histo...

如果同一組件有許多路由，history.push 和 Link 會更改 URL，并且不會重新呈現組件

JavaScript

夢里花落0921 2022-06-16 10:18:36

// the routes here<Switch> <Route exact path='/:page' component={Dashboard} /> <Route exact path='/:subCateg/:categ' component={Dashboard} /></Switch>如果我使用 (history.push) 或 (Link) 只是 URL 更改而不重新加載，我想從第一條路線轉到第二條路線。此外，如果我想從第二條路線到自身但使用新參數，也會出現同樣的問題。//here I'm in Dashbord and the History also pushing to DashboardonClick={ ()=>{ history.push({pathname:`/${categ}/${subCateg}`, state: {id: subCateg.id}}) // window.location.reload(false); } }如您所見，我使用了“window.location.reload(false);” 它解決了加載問題，但是如果我想通過瀏覽器返回按鈕返回，同樣的問題：更改 URL 而不是重新加載。我也認為使用“window.location.reload(false);” 不是一個好習慣。`` package.json: "react-router-dom": "^5.1.2",

查看完整描述

2 回答

暮色呼如

TA貢獻1853條經驗獲得超9個贊

當你使用 react-router-dom 時，你不應該使用 history.push()。嘗試使用 Redirect from react-router-dom 代替。

只需使用名為 redirect 的狀態(tài)并將其設置為您想要使用函數的新路由：

onClick={() => this.setState({ redirect: 'newpath' }};

然后像這樣在你的渲染中放一個 return：

if (this.state.redirect) {

return <Redirect to={this.state.redirect} />;

}

return (

...rest of your render

);

反對回復 2022-06-16

侃侃無極

TA貢獻2051條經驗獲得超10個贊

我對 React 以及它周圍的很多東西都是危險的新手，但我自己在最后一天一直在努力解決這個問題。因此，這可能是非常糟糕的建議，原因有很多。但這是我的情況，也是我如何讓它發(fā)揮作用的。

function newSongRedirect() {

history.push("/SongDetail/0");

history.go(0);

}

并將其連接到我的按鈕：

<button onClick={() => newSongRedirect() } >New Song</button>

似乎 history.push 將值添加到歷史記錄中，但不會導致對其進行操作。作為現在的第一個項目，history.go(0)然后使其對其進行操作。

我已經看到一些帖子引用了 history.push 如果你嵌套在 a 中就不能使用<BrowserRouter>，但在我的情況下，試圖在我的 index.js 中替換它只會導致其他問題。

另外，我發(fā)現這篇文章是從看起來是 React 路由器團隊的一員中找到的。當他們有機會時，似乎 useHistory 掛鉤將被替換。

注意：useHistory 鉤子是我們正在研究的未來鉤子的快速權宜之計：useNavigate。useNavigate 將提供一個更緊密地對齊的 API，并將解決一些直接在路由器中使用歷史 API 的長期問題（它可能看起來很像 @reach/router 的導航 API）。我們現在提供 useHistory 以盡可能輕松地遷移使用歷史 API 的現有代碼。

反對回復 2022-06-16