CODEWITHSUNDEEP
reactjsreact-router
ekclone
ekclone

Reputation: 1092

React router to separate page?

Very new to react, I'm trying to separate the landingpage, login/signup and the app in react router but I cant to make it work, the page always loads the layout of the landing page and under it the login.

// Imports
import 'bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

// Data
import Landing from "./components/landing/landing";
import login from './components/app/auth/login';

// App
const Root = () => (
    <Router>
        <Route path="/" component={Landing} />
        <Route path="/login" component={login} />
    </Router>
)

ReactDOM.render(
    <Root />,
    document.querySelector("#root")
)

// Service worker
serviceWorker.unregister();

Upvotes: 1

Views: 552

Answers (1)

Jake
Jake

Reputation: 732

You have to use exact path within the component. It will look like <Route exact path="/" component={Landing} />

The same goes for the login page.

Upvotes: 3

Related Questions