React Router V4 - 在组件之间路由而不是整个页面

Question

我正在学习React与React Router V4。我在这里有一张图片可以解释我想做什么：

1. 点击“下一步”按钮
2. 将点击事件发送到组件A（“点击按钮”）
3. 单击“下一步”也会将“组件B”与“组件C”交换，同时保持页面上的所有内容相同。
4. 在完成所有这些后，能够导航到具有不同组件的完全不同的页面。

我很难找到路由和结构来处理这个问题。

感谢您的帮助。

我在这里想要完成的是正常的还是这种奇怪的，不推荐。



我尝试了什么：

1. 我尝试将路由器中的组件A放在所有东西之上 - 这一直有效，直到你转到第3页，因为我无法删除它。

2. 我一直在尝试在子主题上实现类似于React Router v4示例的内容。基本上创建一个包含组件A的父组件，在它下面有两个< Match />，一个用于组件B，另一个用于组件C.这也没有用，我可能在这里做了一些非常错误的事情。 https://react-router.now.sh/basic

3. 我一直在阅读许多教程，但它们都是React和React Router的不同版本。我觉得这很简单，但现在已经敲了一个星期，没有任何进展。

Answer 1

也许这样的事情可以帮助你完成任务。

...

const ComponentA = ({children}) => {
    return (
        <div>
            <div>COMPONENT A</div>
            {children}
        </div>
    )
}

<Route path={/} component={SomeWrapper}>
    <Route path={/doubled} component={ComponentA}>
        <Route path={/b} component={ComponentB} />
        <Route path={/c} component={ComponentC} />
    </Route>
    <Route path={/single} component={ComponentZ} />
</Route>

Answer 2

好的，我终于想到了这一点 - 也许不是正确/完美的方式，但似乎有效。我在这里编写代码，介绍如何构建路由和组件。请记住，这是使用反应路由器v4，事情与以前的版本有点不同。

{{1}}

希望这有帮助