Question

是否可以使用不同参数的路径并根据参数渲染不同的组件？

我可以做一个例子：

<Route path="/SamePath/:param1" component={Component1} />
<Route path="/SamePath/:param2" component={Component2} />

Answer 1

如果您尝试使用相同的路径结构但是根据参数的值渲染不同的组件，那么您可以尝试使用渲染来决定基于值的渲染来渲染哪个组件参数：

<Route path="/SamePath/:param1" render={ (props) => {

  if (props.match.params.param1 == 'something') {
    return <Component1 { ...props } />
  } else {
    return <Component2 { ...props } />
  }

} />

Answer 2

如果只是为了让我们说只有两条路线会有所不同而不是使用捕获：只需键入路径的名称Eg。（samePath / organges samePath / apples）如果不是这种情况并且你想捕获一个variarty范围用于呈现不同的组件，您可以使用反应路由器4的正则表达式路由功能..但这要复杂得多

Answer 3

在我的项目中，我创建了一个字典，将参数的可能值映射到所需的组件，并基于该字典创建了<Route>。

<Switch>{
    [{
        ['param1']: Component1,
        ['param2']: Component2,
    }].forEach((component, param) =>
        <Route
            component={component}
            exact
            path={`/path/with/${param}`}
        />
    )
}</Switch>

这将为您希望匹配的每个路径变体生成单独的<Route>。它将为每个路由呈现不同的组件，对我而言，似乎与React-Router v4的动态路由精神保持一致。

我遇到了一个问题：我无法通过传递给呈现的子对象的match属性来访问param的值。该Route与特定的路径字符串匹配（例如，传递给孩子的'/ path / with / paramValue1 ) and not against a route descriptor with a parameter (e.g. '/path/with/:param'). This means the match.params`字典将不包含任何键或值。如果您不需要孩子中的params ，这种方法可以正常工作。我想检查孩子的参数，所以我不得不寻找其他方法。

React Router：如何使用不同的参数呈现不同的组件

3 个答案: