使用react-router-dom时页面内容不显示的问题求助

问题概述 #

开发React应用时，使用react-router-dom配置路由后，home.js、jobs.js等页面内容无法正常显示，尝试过Stack Overflow相关方案仍未解决。

现有代码 #

App.js #

<BrowserRouter>
    <div className="App container">
      <nav className='navbar navbar-expand-sm bg-light navbar-dark'>
        <ul className='navbar-nav'>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/home">
              Home
            </NavLink>
          </li>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/jobs">
              Jobs
            </NavLink>
          </li>
          <li className='nav-item m-1'>
            <NavLink className='btn btn-light btn-outline-primary' to="/jobdetails">
              Job Details
            </NavLink>
          </li>
        </ul>
      </nav>
      <Routes >
        <Route path='/home' element={<home/>} />
        <Route path='/jobs' component={jobs} />
        <Route path='/jobdetails' component={jobdetails} />
      </Routes >
    </div>
</BrowserRouter>

jobs.js #

import React,{Component} from "react";

export class jobs extends Component{
    render(){
        return(
            <div>
                <h3>This is Jobs Page</h3>
            </div>
            
        )
    }
}

home.js #

import React,{Component} from "react";

export class home extends Component{
    render(){
        return(
            <div>
                <h3>This is Home Page</h3>
            </div>
        )
    }
}

输出效果 #

错误分析 #

1. 组件名大小写错误：React要求自定义组件名必须以大写字母开头，小写的home、jobs会被识别为原生HTML标签，无法渲染自定义组件内容。
2. React Router v6 API 误用：react-router-dom v6版本已移除Route组件的component属性，统一使用element属性传入组件实例。
3. 组件未导入（隐含问题）：现有App.js代码中未显示导入home、jobs等组件，若实际未导入也会导致组件无法渲染。

解决方案 #

步骤1：修正组件名大小写 #

将组件类名改为大写开头，并同步修改导出和导入语句：

修改后的home.js

import React,{Component} from "react";

export class Home extends Component{
    render(){
        return(
            <div>
                <h3>This is Home Page</h3>
            </div>
        )
    }
}

export default Home; // 添加默认导出方便导入

修改后的jobs.js

import React,{Component} from "react";

export class Jobs extends Component{
    render(){
        return(
            <div>
                <h3>This is Jobs Page</h3>
            </div>
            
        )
    }
}

export default Jobs; // 添加默认导出方便导入

步骤2：修正App.js中的路由配置 #

统一使用element属性，并导入组件：

import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom';
import Home from './home'; // 导入Home组件
import Jobs from './jobs'; // 导入Jobs组件
import JobDetails from './jobdetails'; // 导入JobDetails组件

function App() {
  return (
    <BrowserRouter>
        <div className="App container">
          <nav className='navbar navbar-expand-sm bg-light navbar-dark'>
            <ul className='navbar-nav'>
              <li className='nav-item m-1'>
                <NavLink className='btn btn-light btn-outline-primary' to="/home">
                  Home
                </NavLink>
              </li>
              <li className='nav-item m-1'>
                <NavLink className='btn btn-light btn-outline-primary' to="/jobs">
                  Jobs
                </NavLink>
              </li>
              <li className='nav-item m-1'>
                <NavLink className='btn btn-light btn-outline-primary' to="/jobdetails">
                  Job Details
                </NavLink>
              </li>
            </ul>
          </nav>
          <Routes>
            <Route path='/home' element={<Home />} />
            <Route path='/jobs' element={<Jobs />} />
            <Route path='/jobdetails' element={<JobDetails />} />
            {/* 可选：添加根路由重定向到Home页 */}
            <Route path='/' element={<Navigate to="/home" />} />
          </Routes>
        </div>
    </BrowserRouter>
  );
}

export default App;

步骤3：确保jobdetails.js同步修正 #

同理将jobdetails组件名改为JobDetails，并添加默认导出，在App.js中正确导入。

完成以上修改后，路由页面内容即可正常显示。

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