使用react-router-dom的BrowserRouter时页面内容无法显示求助

你的问题出在Route组件的element属性传值错误——在react-router-dom v6中，element需要传入组件实例（带尖括号的JSX形式），而你直接传递了组件本身的引用，导致路由无法渲染页面内容。

修正后的App.js代码 #

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import React from 'react';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import { Navbar, NavLink, NavMenu, NavTitle } from './components/Nav/Navbar';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Navbar>
          <NavMenu>
            <NavTitle>Application</NavTitle>
            <NavLink to={'/dashboard'}>
              Dashboard
            </NavLink>
            <NavLink to={'/preferences'}>
              Preferences
            </NavLink>
          </NavMenu>
        </Navbar>
        <div>
          <Routes>
            <Route path='/' exact element={<Homepage />} />
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='/preferences' element={<Preferences />} />
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

原因说明 #

react-router-dom v6对Route组件的element属性有明确要求：它必须接收一个React可渲染节点（即JSX元素）。你之前的写法element={Homepage}只是传递了组件的类引用，并没有创建组件实例，所以路由无法将其渲染到页面上。改为<Homepage />这种形式后，才会生成组件实例并正常渲染内容。

内容的提问来源于stack exchange，提问作者AndrewRicc