如何做出反应重定向到其他组件路由器 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

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

请参阅 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>