How to make react redirect to other component Router 4.2.2-CodePudding

I've been stuck here for days now

What happens here is whenever I click login, the login page will be rendered just below the welcome page. Same thing happends on register

What I'm trying to achive is whenever I click the login button, the login page should only be rendered or I will be redirected to login page only

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;

CodePudding user response：

You have to make a separate welcome page like my example I made a home page

and put the buttons inside your welcome page

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

see the example in stackblitz : https://stackblitz.com/edit/react-96ow9m?file=src/pages/Home.jsx

CodePudding user response：

If you are using react-router v5 or lower you should make your homepage or your main page as exact. In your example if your login page is your main page then you should put exact in order for router to recognize which path is the main page and which are not:

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

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