为什么 React Router v6 不渲染我的组件？

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?

Answer 1

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.