我想在单击链接时更改组件

Question

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

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

<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>

Answer 1

嗨，普拉迪普👋，欢迎来到堆栈溢出社区:)

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

相同的示例可用于忘记密码页面。

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

祝你好运！

Answer 2

我希望这会帮助你如何使用路由和 为了澄清，只需浏览 React 路由器的文档

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>
)
}