Question

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

主页>>登录页面>>创建帐户（1）>（2）>（3）>>返回登录页面或主页换句话说：用户应该能够从主页导航到登录页面，从登录页面导航到具有三个步骤（每个组件都是唯一的组件）的创建帐户页面，并从第三步返回主页。 / p>

我的麻烦在于从第三个创建帐户页面返回首页或登录页面。我可以创建将链接带到页面1> 2、2> 1、2> 3或3> 2的链接。但是我无法使第三页呈现一个链接，该链接会将我带回首页。

最初，我在“创建帐户”页面上有一个switch语句，呈现三个独立的组件。如果我在此switch语句中设置了路由起始位置，则div将按预期在其内部呈现Home。如果我只是简单地省略了路由，则单击链接时页面将无法呈现，但显然具有正确的路径，因为刷新后将正确加载该页面。我也尝试过：移动路由器以限制整个组件，而不仅仅是交换机组件。将路线移至文档中的其他任何内容之前的首页-如预期的那样，在激活路线后，此页面仅在创建帐户页面上方显示了首页。在Switch语句的内部和外部使用重定向。一种非常讨厌的方法，它在div内从对象内部呈现“组件”键的值，然后在单击链接时手动更新该对象中的值，而不是使用与React Router关联不明确的任何东西。这种方法比预期的效果更好，但并非完美。

**作为旁注，有人告诉我（虽然我没有个人经验），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>
)}};

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

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

1 个答案: