我正在使用以下版本：
`"react-router": "^5.2.0",`
`"react-router-domreact-router": "^5.2.0",`
不確定我當前的設定是否對 React-router 5 友好，在此之前我使用的是 v5 之前的版本。
這個例子中的問題是<Route component={withTracker(InterviewContainer)} path="/interviews/companies/:companyId" />和<Link/>
這是我的場景：
- 主頁加載公司鏈接串列
- 單擊
<Link />將我路由到的公司/interviews/companies/:companyId - 頁面加載正常，我看到了該特定公司的圖片等
- 單擊瀏覽器的后退按鈕
- 單擊
<Link />指向不同 companyId 的不同公司 - 問題：對于#5，當公司頁面最初加載時，由于某種原因，它正在加載陳舊的影像和資料。因此，換句話說，我從第 2 步中簡要地看到了前一家公司的資料和影像，直到我的 React 鉤子發出一個新呼叫來獲取這個新 CompanyId 的資料并使用正確的資料重新繪制瀏覽器（companyId 的資料在新路線）
index.tsx（請注意使用的BrowserRouter這里）
import { BrowserRouter as Router } from 'react-router-dom';
//...more code and then:
render(
<>
<div className="Site">
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>
</div>
<Footer />
</>,
);
應用程式
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
...more code and then here are my routes:
<Switch>
<Route component={withTracker(HomePageContainer)} exact path="/" />
<Route
path="/companies/:companyId/details"
render={(props: RouteComponentProps<{ companyId: string }>) => (
<CompanyDetailContainer {...props} fetchCompanyNew={fetchCompanyNew} httpRequest={Request} useFetchCompany={useFetchCompany} />
)}
/>
<Route component={withTracker(InterviewContainer)} path="/interviews/companies/:companyId" />
<Route component={withTracker(About)} path="/about" />
<Route component={withTracker(Container)} path="/" />
<Route component={withTracker(NotFound)} path="*" />
</Switch>
以下是公司鏈接的編碼方式：
注意：我正在使用Redux State。
render() {
const { company } = this.props,
uri = company.notInterviewed ? `companies/${company.id}/details` : `/interviews/companies/${company.id}`,
className = `margin-top-10 margin-bottom-10 ${company.notInterviewed ? 'ft-company-not-interviewed' : ''}`;
const link = (
<Link className={className} id={company.id.toString()} to={uri}>
<span id="company-name">{company.name}</span>
</Link>
);
}
uj5u.com熱心網友回復：
我知道這樣的事情可能很麻煩。您是否嘗試過將鏈接作為<Link to={uri} state={...someState} />. 然后無論它在哪里加載，它都應該根據它重新渲染或重置道具。也許會拋出一些骨架加載器或條件渲染邏輯。
uj5u.com熱心網友回復：
您還可以確保將鏈接和路由包裝在 Router 元素中，使其按預期作業。
import { BrowserRouter as Router} from 'react-router-dom'
<Router>
// Your content
</Router>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/310950.html
標籤：javascript 反应 反应路由器 反应路由器dom
上一篇：Chart.js縮放顯示小數點
下一篇：如何使用材料ui中的“樣式”反應