如何使用React路由器显示嵌套组件？

Question

我使用的是React Router的最新版本，我想知道显示嵌套在父组件中的不同组件的最佳解决方案是什么。

我会试着更好地解释自己。

我有一个路径为/r1的路由R。此路由加载组件A。组件A内部有另外3个组件B、C和D，只有当用户按下组件A中的特定按钮时，我才会在与组件A相同的页面中显示它们。因此，我希望能够在路由R中添加描述来管理这一点。例如，要显示组件B，路由器可以是/r1/b。

现在我在组件A中使用了一个状态变量，但我认为如果我能使用一些React Router属性会更好。

谢谢

Answer 1

您可以创建嵌套路由组件，它将管理嵌套路由。

export default function NestedRoutes() {
    return (
        <Switch>
            <Redirect exact from={"/r1"} to={`/r1/A`} />

            <Route path={`/r1/A`}>
                <ComponentA />
            </Route>

            <Route path={`/r1/B`}>
                <ComponentB />
            </Route>

            // Or to some not found component
            <Redirect to="/r1/A" />
        </Switch>
    );
}

Answer 2

我正在对我的路由条目使用Switch。问题是我不知道如何渲染我想要通过道具传递给另一个组件的组件。

我在我的父组件A中添加了一个属性组件，在我的路径中，我写了类似这样的代码：

<Route path="/r1/hub/A" render={() => <A /> //this render only A
<Route path="/r1/hub/A/B" render={() => <A component={B} /> //this render A with B

在组件A中，我使用React.createElement来呈现组件B以及组件A必须注入的其他属性。