为什么 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 看起来不错。