Question

我在路径ComponentA有/a。假设我在Web应用程序中导航到/a。现在，如果我要加载另一个由另一组根/子组件处理的路径/b/:b/c/:c，但是在当前的url /路径下，我该怎么做？我知道这违反了规范，但我有充分的理由这样做。

这可能吗？如果可以，怎么办？

有效地，在ComponentA内，我想执行以下操作而不更改URL：

this.props.router.push('/b/:b/c/:c');

我想将与上述路径相对应的整个组件树加载到当前URL。

我只知道:b中:c和ComponentA的值，所以我不能真正将其定义为路由器中的多条路径。

Answer 1

只需对<Route>组件使用render方法即可更改渲染的组件而不更改路线。

<Router>
    <Route
        exact
        path="/Component1"
        render={() => {
            if (component === 1)
                return <Component1 setComponent={setComponent} />;
            else return <Component2 />;
        }}
    />
    <Route exact path="/Component2" component={Component2} />
</Router>

这里正在工作sample。转到https://x5qzo.csb.app/Component1并按按钮以更改同一路线下的组件。

如何以编程方式在当前url /路径中加载其他路径/组件？

1 个答案: