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

Question

我知道这个问题已经被问了很多，我已经看了很多答案和文章，包括一篇关于如何从 React Router V5 升级到 V6 的文章，因为我已经习惯了 V5。但是，V6 给了我一个奇怪的问题，我不知道如何解决或者我做错了什么。

下面是我的代码

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

我只是在浏览器中得到一个空白 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>
    );
  }

要解决此问题，只需删除一个或另一个即可。

您的其余代码看起来不错。

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

Why is React Router v6 not rendering my components?

javascript

reactjs

react-router

react-router-dom