將react-router5與redux7一起使用時react-router<Link>在轉到新路由后不會重置狀態

我正在使用以下版本：

`"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/>

這是我的場景：

1. 主頁加載公司鏈接串列
2. 單擊<Link />將我路由到的公司/interviews/companies/:companyId
3. 頁面加載正常，我看到了該特定公司的圖片等
4. 單擊瀏覽器的后退按鈕
5. 單擊<Link />指向不同 companyId 的不同公司
6. 問題：對于#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 "react-redux": "^7.2.1", "redux": "^4.0.5", "redux-thunk": "^2.3.0",

InterviewContainer.tsx（執行公司獲取的父級）

class InterviewContainer extends Component<PropsFromRedux & RouteComponentProps<{ companyId: string }>> {
    componentDidMount() {
        const { fetchCompany } = this.props;
        const { companyId } = this.props.match.params;
        fetchCompany(companyId);
    }
    
    render() {
        const { company } = this.props;
        return (company && <Interview className="ft-interview" company={company} />) || null;
    }
}

const mapState = (state: RootState) => ({
    company: state.company.company,
});

const mapDispatch = {
    fetchCompany: fetchCompanyFromJSON,
};

const connector = connect(mapState, mapDispatch);

type PropsFromRedux = ConnectedProps<typeof connector>;
export default withRouter(connect(mapState, mapDispatch)(InterviewContainer));

LinkItem.tsx（由 呈現InterviewContainer和接收公司的子項之一InterviewContainer）

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>
    );
}

我想我可能必須在路由更改時重置 Redux 狀態。我看到過去有人使用過LOCATION_CHANGE但已經過時了，這是由不再支持的第三方 redux 庫提供的常量。所以不確定如何使用 Redux v7

所以我想我只需要一種方法來檢測位置更改，然后以某種方式更新我的反應存盤以重置公司（company: state.company.company,從我的 redux 操作設定為未定義）

uj5u.com熱心網友回復：

我知道這樣的事情可能很麻煩。您是否嘗試過將鏈接作為<Link to={uri} state={...someState} />. 然后無論它在哪里加載，它都應該根據它重新渲染或重置道具。也許會拋出一些骨架加載器或條件渲染邏輯。

uj5u.com熱心網友回復：

您還可以確保將鏈接和路由包裝在 Router 元素中，使其按預期作業。

import { BrowserRouter as Router} from 'react-router-dom'

<Router>
   // Your content
</Router>

標籤：javascript 反应 还原 反应路由器 反应路由器dom

上一篇：使用Javascript從Markdown表中提取資料

下一篇：在VUE中匯入BOOSTRAP