React router to separate page?

Question

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();

Jake · Accepted Answer · 2019-04-03 01:43:33Z

3

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.

answered Apr 3, 2019 at 1:43

Jake

7427 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jake Over a year ago

No worries. Use just path when routing components like navbars and footers so they load on various pages.

Collectives™ on Stack Overflow

React router to separate page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related