javascript - 在将 react-router 5 与 redux 7 一起使用时，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/>

这是我的场景：

主页加载公司链接列表
单击<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 />
    </>,
);

应用程序.ts

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状态“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.tsxInterviewContainer （由公司渲染并从公司接收的孩子之一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>
    );
}

我想我可能必须在 route change 时重置 Redux 状态。我看到过去有人使用过LOCATION_CHANGE，但那已经过时了，这是第三方 redux 库提供的常量，不再受支持。所以不确定如何使用 Redux v7+

所以我认为我只需要一种方法来检测位置变化，然后以某种方式更新我的反应商店以重置公司company: state.company.company,（从我的 redux 操作中设置为未定义）

标签： javascriptreactjsreduxreact-routerreact-router-dom

javascript - 在将 react-router 5 与 redux 7 一起使用时，react-router在转到新路由后不会重置状态

问题描述

解决方案

推荐阅读