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

【问题标题】：How can I nest dynamic page routed components in React Routers?如何在 React 路由器中嵌套动态页面路由组件？
【发布时间】：2019-10-09 09:28:17
【问题描述】：

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

首页>>登录页面>>创建账号(1)>(2)>(3)>>返回登录或首页简而言之：用户应该能够从主页导航到登录页面，从登录页面导航到创建帐户页面，需要三个步骤（每个步骤都是唯一的组件），然后从第三步返回主页。

我的麻烦在于从第三个创建帐户页面返回主页或登录页面。我可以创建将我从第 1 页 > 2、2 > 1、2 > 3 或 3 > 2 带到我的链接。但我不能让第三页呈现一个可以让我回到主页的链接。

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

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

应用程序：

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>
)}};

一个示例组件PageThree（其他的暂时类似，只是相互链接）：

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>
)}};

【问题讨论】：

标签： reactjs nested react-router

【解决方案1】：

解决方案其实很简单：我误解了 Router 组件的用途，而这些（不是 switch 语句或路由）的嵌套才是真正的问题。通过移除内部 Router 组件（在我的例子中，CreateAccount 组件中的那个），导航能够顺利地从第三页流回外部页面。

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>
)}};

【讨论】：