如何在 ReactJS 中从一条路线导航到另一条路线

Question

我一直在尝试使用 react 和 react-router-dom 开发 Web 应用程序，用户单击我的反应路线上的按钮。理想情况下，我希望用户在单击所述按钮后被导航到全新的页面。

作为参考，我有一个登录页面，其中我有反应路由器允许用户在登录或注册表单之间切换以显示在页面上

<Router>
  <NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link" > 
  Sign In </NavLink>
   or
  <NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active" 
  className="FormTitle__Link" > Sign Up </NavLink>

  <Route exact path="/" component={signUpForm}></Route> 
  <Route path="/sign-in" component={signInForm}></Route>
<Router>

^我遗漏了我的一些代码，但只留下了有关 react-router 的部分

登录和注册页面上都有按钮，我想找出一些方法，使用 react-router 或任何其他能够从这些路由导航的方法，因为我试图在内部再次使用 react-router我的 signUpForm/signInForm 文件，但很快发现您不能在路线中使用。

如果我需要澄清任何事情或提供更多信息，请告诉我。 提前致谢

Answer 1

如果您的signUpForm 和signInForm 组件已正确定义并导入到提供的文件中，您现在唯一需要做的就是将这些<Route .../> 元素放入<Switch/> 组件中。我认为这样的事情会有所帮助：

<Router>
  <NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" 
    className="FormTitle__Link" > Sign In </NavLink>
   or
  <NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active" 
  className="FormTitle__Link" > Sign Up </NavLink>
 <Switch>
   <Route exact path="/" component={signUpForm}/> 
   <Route path="/sign-in" component={signInForm}/>
 </Switch>
<Router>