Question

我在React的表格中有一个项目列表。当我单击表Link时，URL更新，但该组件未呈现。如果我刷新该组件，则在那里。

我已阅读到某些React-router-dom版本存在一些问题，并且这里讨论了很多解决方案：

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

尽管是Beta版本。我假设我需要对withRouter中的高阶函数react-router-dom进行操作，但这对我不起作用。最重要的是，withRouter已在应用程序中全局设置。

const AppHeader = withRouter(({ history, location, ...props }) => (
  <Header {...props} currentRoute={location.pathname} />
));

问题是，我的App有多个应用程序。 1个Angular和2个React。我是否还需要在每个应用程序上进行设置？这是路由器无法连接的应用程序的父组件。

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

import 'react-tagsinput/react-tagsinput.css';

import PolicyRoutes from 'dataprotection/policies/containers/PolicyRoutes';

import './styles.scss';

const AppRouter = () => (
  <Switch>
    <Route exact path="/policies" component={PolicyRoutes} />
    <Redirect to="/policies" />
  </Switch>
);

AppRouter.propTypes = {};

function mapStateToProps() {
  return {};
}

export default connect(mapStateToProps)(AppRouter);

我尝试了2种解决方案。首先是像这样包装我的组件withRouter：

<Route exact path="/policies" component={withRouter(PolicyRoutes)} />

第二个是包装withRouter这个connect函数。两者都不起作用。

该组件无法正常工作：

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

import OverviewScreen from '../OverviewScreen';
import PolicyDetailsScreen from '../PolicyDetailsScreen';

const PolicyRoutes = ({ match }) => (
  <Switch>
    <Route exact path={`${match.url}/details/:policyId`} component={PolicyDetailsScreen} />
    <Route exact path={match.url} component={OverviewScreen} />
    <Redirect to={match.url} />
  </Switch>
);

PolicyRoutes.propTypes = {
  match: PropTypes.object
};

export default PolicyRoutes;

有人可以帮忙吗？我不知道问题是什么...

React-Router-Dom | URL更改，但组件未更新

0 个答案: