CODEWITHSUNDEEP
reactjsreact-router-dom
user17880803
user17880803

Reputation:

How to make react redirect to other component Router 4.2.2

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;

Upvotes: 0

Views: 373

Answers (2)

elkarkoubi othmane
elkarkoubi othmane

Reputation: 91

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

Upvotes: 1

undefined
undefined

Reputation: 441

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>

Upvotes: 0

Related Questions