如何使react重定向到其他组件路由器4.2.2

Question

我已经在这里呆了好几天了

这里发生的情况是，每当我单击登录时，登录页面就会显示在欢迎页面的正下方。同样的事情发生在注册上

我试图实现的是，每当我点击登录按钮时，登录页面都应该只显示出来，否则我将被重定向到只显示的登录页面

import React from "react";
import Login from "./Login";
import Register from "./Register";
import { Link, Switch, Route } from "react-router-dom";
class Welcome extends React.Component {
render() {
return (
<div>
<h1>Welcome</h1>
<Link to="/login">
<button>Login</button>
</Link>
<Link to="/register">
<button>Register</button>
</Link>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/register">
<Register />
</Route>
</Switch>
</div>
);
}
}
export default Welcome;

Answer 1

你必须制作一个单独的欢迎页面，就像我的例子一样，我制作了一个主页

并将按钮放在欢迎页面内

<>
<h1>Welcome</h1>
<Link to="/Login">
<button>Login</button>
</Link>
<Link to="/Register">
<button>Register</button>
</Link>
</>

请参阅stackblitz中的示例：https://stackblitz.com/edit/react-96ow9m?file=src/pages/Home.jsx

Answer 2

如果你使用的是react router v5或更低版本，你应该让你的主页或主页准确无误。在你的例子中，如果你的登录页面是你的主页，那么你应该准确地让路由器识别哪些路径是主页，哪些不是：

<Switch>
<Route exact path="/login">
<Login />
</Route>
<Route path="/register">
<Register />
</Route>
</Switch>