CODEWITHSUNDEEP
javascriptreactjsreact-router
haacki47
haacki47

Reputation: 426

How to create independent pages via react router?

I came from Angular framework to React and I got confused with router library. I'm trying to create Login page as a separate page in my app which is should contain Navigation and Footer which is part of Main.

I added this code to solve it but run into trouble.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';

import './index.css';

import App from './App';
import Login from './containers/Login';

ReactDOM.render(
  <BrowserRouter>
    <Route path="/">
      <App />
    </Route>

    <Route path="/login">
      <Login />
    </Route>
  </BrowserRouter>
, document.getElementById('root'));

//app.js
class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />

          <Switch>
            <Route path="/">
              <Redirect to="/dashboard" />
            </Route>

            <Route path="/dashboard">
              <Dashboard />
            </Route>

            <Route path="/admin">
              <Admin />
            </Route>
          </Switch>

          <Footer />
        </div>
      </Router>
    );
  }
}

I'm using react-router-dom library.

So the main idea is I desire to load /login page without Navbar and Footer but for other pages in my app like Admin, Dashboard I want them to load with Navbar and Footer (I don't want use conditional rendering here).

But now when I go to /login page I see Navbar and Footer, also I can't go to dashboard.

Upvotes: 0

Views: 745

Answers (3)

TopW3
TopW3

Reputation: 1527

Please try this.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

import './index.css';

import App from './App';
import Login from './containers/Login';

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/login">
        <Login />
      </Route>
      
      <Route path="/">
        <App />
      </Route>
    </Switch>
  </BrowserRouter>
, document.getElementById('root'));

//app.js
class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />

          <Switch>

            <Route path="/dashboard">
              <Dashboard />
            </Route>

            <Route path="/admin">
              <Admin />
            </Route>
            
            <Route exact path="/">
              <Redirect to="/dashboard" />
            </Route>

          </Switch>

          <Footer />
        </div>
      </Router>
    );
  }
}

Upvotes: 2

maja_jokovic
maja_jokovic

Reputation: 21

In my experience, it is the best practice to place the root path('/') with ëxact props at the later route just before NotFoundPage. I think it is the same as in Angular router.

Upvotes: 1

voiys
voiys

Reputation: 299

Add the exact property to the route element

Upvotes: 1

Related Questions