Why is React Router v6 not rendering my components?

Question

I know this question has been asked a lot and I've looked at quite a lot of answers and articles including one on how to upgrade from React Router V5 to V6 since I'm used to V5. However, V6 is giving me a weird issue which I don't know how to fix or what am I doing wrong.

Here's my code below

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './components/dashboard/Login';
import Profile from './components/dashboard/Profile';
import './resources/style/tutorApp.css';


export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
      <Router>
        <Routes>
          <Route path="/" element={ <Profile /> } />
          <Route path="/Login" element={ <Login /> } />
        </Routes>
      </Router>
    );
  }
}

Profile.js

import React, { Component } from 'react';

class Profile extends Component {
    render() {
        return (
            <div>
                <h1>This is my Profile Page.</h1>
            </div>
        );
    }
}

export default Profile;

Login.js

import React, { Component } from 'react';

class Login extends Component {
    render() {
        return (
            <div>
                <h1>This is my Login page.</h1>
            </div>
        );
    }
}

export default Login;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>,
  rootElement);

registerServiceWorker();

I just get a blank window in the browser. Nothing is rendered! What is the problem?

Does the route match the paths including the baseUrl?

user5734311
– user5734311

2022-01-19 19:02:50 +00:00
Commented Jan 19, 2022 at 19:02 — user5734311
– user5734311, Commented Jan 19, 2022 at 19:02

Webber · Accepted Answer · 2022-01-19 19:13:25Z

2

You are mounting a router inside another router.

In ReactDom.render you're wrapping your app in BrowserRouter.

import { BrowserRouter } from 'react-router-dom';

// ...

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>  // <-- this is the outer browser router
    <App />
  </BrowserRouter>,
  rootElement
);

However inside your app you mount another BrowserRouter in your render method.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// ...

  render () {
    return (
      <Router> // <-- this is the nested browser router
        <Routes>
          <Route path="/" element={ <Profile /> } />
          <Route path="/Login" element={ <Login /> } />
        </Routes>
      </Router>
    );
  }

To fix the problem simply remove one or the other.

The rest of your code looks fine.

edited Jan 19, 2022 at 19:13

answered Jan 19, 2022 at 19:08

Webber

5,6704 gold badges38 silver badges47 bronze badges

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

3 Comments

Mbuso Kotobe Over a year ago

Router is actually BrowserRouter. I imported it as Router there! Did you see that?

Webber Over a year ago

Yup, so you're rendering two of them inside each other, which is incorrect.

Mbuso Kotobe Over a year ago

Oh sorry I see what you talking about now

Collectives™ on Stack Overflow

Why is React Router v6 not rendering my components?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related