测试用例

https://codesandbox.io/s/rr00y9w2wm

重现步骤

• 点击 Topics
• 点击 Rendering with React

或

• 转到 https://rr00y9w2wm.codesandbox.io/topics/rendering

预期行为

• match.params.topicId应该与父 Topics 组件相同应该与 match.params.topicId 相同在 主题 组件中访问时

实际行为

• match.params.topicId在 Topic 组件中访问时是 undefined
• match.params.topicId在 Topics 组件中访问时呈现

我从this closed issue了解到这不一定是错误。

此要求在想要在组件 Topics 的工厂 Web 应用程序中创建运行的用户中非常普遍。在父级别需要访问 ma​​tch.params.paramId，其中 paramId是匹配嵌套(子)组件的 URL 参数 Topic :

const Topic = ({ match }) => (
  <div>
    <h2>Topic ID param from Topic Components</h2>
    <h3>{match.params.topicId}</h3>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <h3>{match.params.topicId || "undefined"}</h3>
    <Route path={`${match.url}/:topicId`} component={Topic} />
    ...
  </div>
);

一般意义上，Topics可以是抽屉或导航菜单组件和 Topic可以是任何子组件，就像它在我正在开发的应用程序中一样。子组件有自己的 :topicId参数有它自己的(比方说)<Route path="sections/:sectionId" component={Section} />路线/组件。

更痛苦的是，导航菜单不需要与组件树具有一对一的关系。有时，菜单根级别的项目(比如 Topics、Sections 等)可能对应于一个嵌套结构(Sections 仅在主题下呈现，/topics/:topicId/sections/:sectionId 虽然它有自己的规范化列表，用户可以在导航栏中的标题 Sections 下使用)。 因此，当点击Sections时，它应该突出显示，而不是Sections和Topics.

随着 sectionId或 sections应用程序根级别的导航栏组件的路径不可用，因此有必要编写 hacks like this对于这样一个常见的用例。

我根本不是 React Router 方面的专家，所以如果有人能为这个用例尝试一个合适的优雅解决方案，我会认为这是一项富有成果的尝试。优雅，我的意思是

• 使用 match而不是 history.location.pathname
• 不涉及手动解析 window.location.xxx 等骇人听闻的方法
• 不使用 this.props.location.pathname
• 不使用像path-to-regexp 这样的第三方库
• 不使用查询参数

其他技巧/部分解决方案/相关问题:

1. React Router v4 - How to get current route?

2. React Router v4 global no match to nested route childs

TIA!

最佳答案

React-router 不会为您提供任何匹配的子 Route 的匹配参数，而是根据当前匹配为您提供参数。因此，如果您将路线设置为

<Route path='/topic' component={Topics} />

在 Topics 组件中你有一个像这样的 Route

<Route path=`${match.url}/:topicId` component={Topic} />

现在，如果您的 url 是 /topic/topic1，它与内部路由匹配，但对于主题组件，匹配的路由仍然是 /topic，因此没有参数在其中，这是有道理的。

如果你想获取主题组件中匹配的子路由的参数，你需要使用 React-router 提供的 matchPath 实用程序并针对你想要的参数的子路由进行测试获得

import { matchPath } from 'react-router'

render(){
    const {users, flags, location } = this.props;
    const match = matchPath(location.pathname, {
       path: '/topic/:topicId',
       exact: true,
       strict: false
    })
    if(match) {
        console.log(match.params.topicId);
    }
    return (
        <div>
            <Route exact path="/topic/:topicId" component={Topic} />
        </div>
    )
}

编辑:

获取任何级别的所有参数的一种方法是使用上下文并在参数与上下文提供程序匹配时更新参数。

您需要为 Route 创建一个包装器才能使其正常工作，一个典型的示例如下所示

RouteWrapper.jsx

import React from "react";
import _ from "lodash";
import { matchPath } from "react-router-dom";
import { ParamContext } from "./ParamsContext";
import { withRouter, Route } from "react-router-dom";

class CustomRoute extends React.Component {
  getMatchParams = props => {
    const { location, path, exact, strict } = props || this.props;
    const match = matchPath(location.pathname, {
      path,
      exact,
      strict
    });
    if (match) {
      console.log(match.params);
      return match.params;
    }
    return {};
  };
  componentDidMount() {
    const { updateParams } = this.props;
    updateParams(this.getMatchParams());
  }
  componentDidUpdate(prevProps) {
    const { updateParams, match } = this.props;
    const currentParams = this.getMatchParams();
    const prevParams = this.getMatchParams(prevProps);
    if (!_.isEqual(currentParams, prevParams)) {
      updateParams(match.params);
    }
  }

  componentWillUnmount() {
    const { updateParams } = this.props;
    const matchParams = this.getMatchParams();
    Object.keys(matchParams).forEach(k => (matchParams[k] = undefined));
    updateParams(matchParams);
  }
  render() {
    return <Route {...this.props} />;
  }
}

const RouteWithRouter = withRouter(CustomRoute);

export default props => (
  <ParamContext.Consumer>
    {({ updateParams }) => {
      return <RouteWithRouter updateParams={updateParams} {...props} />;
    }}
  </ParamContext.Consumer>
);

ParamsProvider.jsx

import React from "react";
import { ParamContext } from "./ParamsContext";
export default class ParamsProvider extends React.Component {
  state = {
    allParams: {}
  };
  updateParams = params => {
    console.log({ params: JSON.stringify(params) });
    this.setState(prevProps => ({
      allParams: {
        ...prevProps.allParams,
        ...params
      }
    }));
  };
  render() {
    return (
      <ParamContext.Provider
        value={{
          allParams: this.state.allParams,
          updateParams: this.updateParams
        }}
      >
        {this.props.children}
      </ParamContext.Provider>
    );
  }
}

索引.js

ReactDOM.render(
  <BrowserRouter>
    <ParamsProvider>
      <App />
    </ParamsProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

Working DEMO

关于javascript - React Router v4 嵌套匹配参数无法在根级别访问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52684017/