如何在React路由器中嵌套动态页面路由组件？

Question

我正在使用React制作一个动态网页。我正在使用React Routers中的一个交换机组件，根据用户的需要，将主页更改为其他各种页面。我希望通过以下路由创建新帐户：

主页

我的问题在于从第三个创建帐户页面返回主页或登录页面。我可以创建链接，使我从第1页

最初，我在createaccount页面中有一个switch语句，呈现三个独立的组件。如果我在这个switch语句中设置了route home，div就会像预期的那样在其中呈现home。如果我只是省略了路由，当我点击链接时，页面将无法呈现，但显然有正确的路径，因为刷新时它将正确加载。我也尝试过：移动路由器以限定整个组件，而不仅仅是交换机组件。在文档中的任何内容之前将路由移动到主页-正如预期的那样，这只是在激活路由时将主页呈现在“创建帐户”页面上方。在Switch语句内部和外部使用重定向。在div中呈现对象内部“组件”键的值，并在单击链接时手动更新该对象中的值，而不是使用任何与路由器模糊关联的东西，这是一种非常糟糕的方法。这比它应该做的更好，但并不完美。

**作为一种旁注，我被告知（尽管我没有个人经验）Vue有一个“步进器”，可以用来浏览第1、2和3页，以避免使用嵌套路由器。React或React路由器中有这样的东西吗？

应用程序：

function App() {
  return (

    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/Login" component={Login} />
        <Route path="/CreateAccount" component={CreateAccount} />
        <Route path="/Account_Recovery" component={Recovery} />
        <Route path="/RR_One" component={RR_One} />
      </Switch>
    </Router>

  );
}

现在存在的创建帐户页面：

class CreateAccount extends React.Component {
  render() {
    return (

    <Router>
      <PageHeader pageTitle="Create a Free Account"/>

      <div className="pageBody">
        <div className="centerHalf">

            <Route path="/CreateAccount/1" component={PageOne} />
            <Route path="/CreateAccount/2" component={PageTwo} />
            <Route path="/CreateAccount/3" component={PageThree} />

        </div>
        <p>Paragraph outside of the changing div.</p>
      </div>

    </Router>
)}};

一个示例组件PageIII（其他组件现在类似，只是相互链接）：

class PageThree extends React.Component {
  render() {
    return (
      <div>
        <p>Page Three</p>
        <Link to={{pathname: "/CreateAccount/2"}}>Go to page 2</Link> <br />
        <Link to={{pathname: "/Login"}}>Complete</Link>
      </div>
)}};

Answer 1

解决方案其实非常简单：我误解了路由器组件的用途，而这些组件的嵌套（不是switch语句或路由）才是真正的问题。通过删除内部路由器组件（在我的例子中，是CreateCount组件中的一个），导航能够从第三页平滑地返回到外部页面。

class CreateAccount extends React.Component {
  render() {
    return (

    <div>

      <PageHeader pageTitle="Create a Free Account"/>

      <div className="pageBody">
        <div className="centerHalf">

            <Route path="/CreateAccount/1" component={PageOne} />
            <Route path="/CreateAccount/2" component={PageTwo} />
            <Route path="/CreateAccount/3" component={PageThree} />

        </div>
        <p>Paragraph outside of the changing div.</p>
      </div>

    </div>
)}};