為什么 React Router v6 不渲染我的組件？

Question

我知道這個問題已經被問了很多，我看過很多答案和文章，包括一篇關於如何從 React Router V5 升級到 V6 的文章，因為我已經習慣了 V5。 但是，V6 給了我一個奇怪的問題，我不知道如何解決或者我做錯了什么。

下面是我的代碼

應用程序.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;

登錄.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();

我只是在瀏覽器中得到一個空白的 window 。 什么都沒有渲染？ 問題是什么？

Answer 1

您正在將路由器安裝在另一個路由器內。

在ReactDom.render中，您將應用程序包裝在BrowserRouter中。

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

// ...

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

但是，在您的應用程序中，您在渲染方法中安裝了另一個BrowserRouter 。

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

要解決此問題，只需刪除其中一個。

您的代碼的 rest 看起來不錯。