Question

我有一个带有React Router 4的嵌套路由定义

const App = () => (
<Switch>
  <Route
    key={3}
    path='/case-studies'
    render={({ match: { url } }) => (
      <div>
        <Route
          exact
          path={`${url}/`}
          render={(location) => <Page
            location={location}
            data={
              {
                type: 'archive',
                api: apiBase + '/' + 'pages' + '?slug=case_study'
              }
            } />
          } />
        <Route
          exact
          path={`${url}/:slug`}
          render={(location, match) => <Page
            location={location}
            data={
              {
                type: 'archive',
                api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
              }
            } />
          } />
      </div>
    )}
  />,

我对此行感兴趣：

api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug

我知道如何在渲染的组件“ Page”道具中引用匹配项。
但是，我正在尝试在路由中定义此属性（'api'），并将其通过已定义的组件传递给组件，但带有动态参数。

但是，我似乎无法在此处访问match或其动态属性“ slug”（在路由定义内部）。

这可能吗？如果是这样，由于我在其他地方都找不到它的引用，这是一种反模式吗？（如果是这样，为什么？）

Answer 1

这似乎可行：

<Route
  exact path={`${url}/:slug`}
  render={({ match: { params: { slug } } }) => (
    <Page
      data={
        {
          type: 'archive',
          api: apiBase + '/' + 'case_study' + '?slug=' + slug
        }
      }
    />)
  }
/>

React Router 4，路由定义内的参考参数

1 个答案: