重定向到无法在 React 应用程序上运行的新页面

Question

当用户注册到应用程序时，数据将使用返回访问令牌的 API 保存到数据库中。 在此步骤之后，需要将用户重定向到另一个页面（注册详细信息）。 我正在使用下面附加的代码来做同样的事情。 一旦我提交按钮，令牌就会返回，URL 将更改为新的。 但是页面不显示。 请帮我解决这个问题。

应将用户重定向到的新页面。

应用程序.js

Answer 1

您需要将第一个路由的 url 设为“\/”而不是“*”，因为现在它匹配所有路由。

<Route exact path="/" component={SignupForm} />

Answer 2

path="*"从字面上匹配任何路由，并且由于您将Route组件渲染到Switch中，因此仅渲染第一个匹配的Route或Redirect 。

请记住，在Switch路径中，顺序和特异性很重要！ 如果订购正确，则几乎不需要使用exact道具。 按反向路径特异性的路径对路由进行排序，即"/SignupDetails"和"/Signup"都比"/"更具体，并且应该在Switch中显示得更高。

<Router>
  <Switch>
    <Route path="/SignupDetails" component={SignupDetailsForm} />
    <Route path="/Signup" component={SignupForm} />
    <Route path="/" component={SignupForm} />
  </Switch>
</Router>

react-router-dom v6 Route path prop 也可以采用路径数组，所以如果你愿意，你可以让你的代码更干一点。 请记住，路径顺序和特异性在数组中仍然很重要。

<Router>
  <Switch>
    <Route path="/SignupDetails" component={SignupDetailsForm} />
    <Route path={["/Signup", "/"]} component={SignupForm} />
  </Switch>
</Router>