如何在反应中处理 URL 参数

Question

我在 reactJs 中有一个应用程序，使用 redux 和路由器。如果这个问题更多的是关于逻辑而不是代码，我很抱歉，但问题范围很窄。

我的应用程序中有不同的类别，每个类别都会像这样设置路线：

/:category1/
/:category1/:item1
/:category1/:item1/:scheduling1

有超过 50 条不同的路由，我都在我的路由器中设置了它们。

        <PrivateRoute path="/:category1/:item1/:scheduling1" component={SchedulingComponent} />
        <PrivateRoute path="/:category1/:item1" component={ItemComponent} />
        <PrivateRoute path="/:category1" component={CateogryComponent} />

现在，当用户在应用程序中导航时，此功能非常有用。

我遇到的问题是当用户重新加载浏览器或直接访问 link 时。

因为所有这些路径实际上都是 id，如果我访问例如 /:category1/:item1/:scheduling1

我需要在我的 redux 存储中发送 3 个串联的操作

selectCategory
selectItem
selectScheduling

问题是不知道如何正确处理。

我很困惑，如果最好是在每个组件的 ComponentDidMount 中分派一些调用（但当用户导航并且不需要这些调用时也会发生这种情况）

或者如果有一种方法可以在第一次加载时分派所有必要的操作。就像在 <app> 中制作一个组件，它只会在安装时读取和分派操作（所以只有一次）

Answer 1

不确定这是否适合您，但也许您可以在渲染任何路由内容之前设置 redux 状态：

function Connected({ Component, ...props }) {
  const dispatch = useDispatch();
  //route changed, dispatch action that will set redux state
  //  assuming this is a sync op
  dispatch({ type: 'PARAM_CHANGE', payload: useParams() });
  //render actual route content, redux state should have been set
  //  with the route parameters
  return <Component {...props} />;
}
const ConnectedRoute = ({
  component: Component,
  ...props
}) => (
  <Route
    {...props}
    render={props => {
      return <Connected Component={Component} {...props} />;
    }}
  />
);

在您的路线中，您可以使用 ConnectedRoute：

<Switch>
  <ConnectedRoute
    path="/:id"
    component={SomeContentNeedingIdInReduxState}
  />
  <Route path="/" component={Home} />
</Switch>

这个问题是redux store跟随react-router，当react-router改变路由时，路由数据将被复制到store中。当您在 redux 开发工具中回放操作时，它不会执行您期望的操作。

要让 react-router 跟随 redux store 并通过操作更改路由，您可以使用 this package.

如何在反应中处理 URL 参数

How to handle URL parameter in react

reactjs

routing