单击链接时我想更改组件答案

【问题标题】：I want to change component when a link is clicked单击链接时我想更改组件
【发布时间】：2019-10-22 12:48:31
【问题描述】：

我想在单击链接时更改不同的组件。就像我点击忘记密码时一样，忘记密码组件应该打开。

我使用路由器和交换机来更改我的组件，但无法正常工作。它将在当前组件上添加新组件的内容。

<Form>
              <h1>LOGIN</h1>
              <div className="form-content" onSubmit={this.handleSubmit}>
                <Form.Group controlId="formBasicEmail">
                  <Form.Label>Email</Form.Label>
                  <Form.Control type="email" placeholder="Enter email" name="email" onChange={this.handleInputChange} />
                </Form.Group>
                <Form.Group controlId="formBasicPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control type="password" placeholder="Enter Password" name="password" onChange={this.handleInputChange} />
                </Form.Group>
                <Router>
                  <Link to='/Forgetpassword'>Forget Password</Link>

                  <Switch>
                    <Route path="/Forgetpassword" Component={Forgetpassword} />
                    {/* </Route> */}
                  </Switch>
                </Router>
                <div className="btn-content">
                  <Button variant="primary">
                    Signup
              </Button>
                  <Button variant="primary" type="submit">
                    Submit
              </Button>
                </div>
              </div>
            </Form>

【问题讨论】：

我发布了一个例子，如果你通过一次stackoverflow.com/a/58504851/6544460
嘿，检查一下我发布了简单的需求解决方案stackoverflow.com/a/58504851/6544460

标签： reactjs navigation components

【解决方案1】：

嗨，Pradeep ?，欢迎来到 stack-overflow 社区 :)

react-router 路径应该等于路由，例如：/login 那么组件属性应该等于一个组件，例如当用户导航到 /login 时，他会看到登录页面。

同样的例子可以用于忘记密码页面。

查看这个实时示例：https://reacttraining.com/react-router/web/example/basic

祝你好运！

【讨论】：

感谢您分享的同一个参考资料，但它将新组件的内容加载到当前组件
@Pradeep 如果您分享代码，我可以进一步帮助您。
尝试在 Route 组件中添加 'exact' 关键字，如下所示：<Route exact path="/component" Component={component}/>
@NateBen 我在上面编辑了我之前的代码，请看一下！
嘿@Pradeep，我知道问题出在哪里，请检查这支笔并提供建议的解决方案：stackblitz.com/edit/react-fipmdy

【解决方案2】：

我希望这将帮助您了解如何使用路由和为了澄清，只需查看react router的文档

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch
} from "react-router-dom";
export default function App() {
  return (
    <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
    </Router>
  );
}


function Home() {
  return (
    <div>
      <h2>Home</h2>
      Visit <Link to="/about">----> About</Link>
      <p>You landed to Home page</p>
    </div>
  );
}

function About(){
  return(
        <div>
         <h2>About</h2>
          Visit <Link to="/">----> Home</Link>
          <p>You landed to about page</p>
        </div>
    )
}

【讨论】：