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

如果您使用的是 react-router v5 或更低版本，您应该使您的主页或主页面保持原样。在您的示例中，如果您的登录页面是您的主页，那么您应该准确放置以便路由器识别哪个路径是主页，哪些不是：

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

 <Route path="/register">
   <Register />
 </Route>
</Switch>

Answer 2

你得像我的例子一样单独做一个欢迎页面我做了一个主页

并将按钮放入您的欢迎页面

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

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

How to make react redirect to other component Router 4.2.2

reactjs

react-router-dom