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

Posted

技术标签:

【中文标题】如何在 React 路由器中嵌套动态页面路由组件?【英文标题】:How can I nest dynamic page routed components in React Routers? 【发布时间】: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>
);

【问题讨论】:

【参考方案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 路由器中嵌套动态页面路由组件?的主要内容,如果未能解决你的问题,请参考以下文章

react-route动态路由,它的子路由路径配置在啥地方

如何使用嵌套路由和私有路由组件在 react.js 中正确构建路由?

react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件

React router 4 如何嵌套路由 /admin 和 /

React 路由使用

如何使用 Apollo 和 React Router 避免嵌套路由/查询组件的请求瀑布?