如何在 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.js 中正确构建路由?
react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件