使用React Router时组件无法显示的技术问题求助

嘿，我帮你找出问题所在啦！你遇到的URL变化但组件不渲染的情况，主要是两个小细节出错了：

1. Route组件的属性名写错了 #

React Router v5 中，Route 用来指定对应路径要渲染的组件时，属性名是小写的component，而你写成了大写的Component。这个大小写错误会让 React Router 无法识别你要挂载的组件，自然就看不到内容啦。

2. Menu组件里多余的Router包裹 #

你的 App 组件已经用BrowserRouter（别名 Router）包裹了整个路由相关区域，Menu 作为 Router 的子组件，完全不需要再自己套一层 Router，这会导致路由上下文冲突，也会干扰组件的正常渲染。

修改后的代码 #

App.js

import React, { Component } from 'react';
import './App.css';
import { Header } from './app/header';
import { Footer } from './app/footer';
import { Menu } from './app/menu';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Welcome } from './app/welcome';
import { Employees } from './app/employees';

class App extends Component {
  render() {
    return (
      <div>
        <Header></Header>
        <Router>
          <div>
            <Menu></Menu>
            <>
              {/* 修正属性名：Component → component */}
              <Route exact path="/" component={Welcome}></Route>
              <Route path="/employees" component={Employees}></Route>
            </>
          </div>
        </Router>
        <Footer name="Hardik Gondalia"></Footer>
      </div>
    )
  }
}

export default App;

Menu.jsx

import React, { Component } from 'react'
import { Link } from 'react-router-dom'; // 移除多余的BrowserRouter导入

export class Menu extends Component {
  render() {
    return (
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/employees">Employees</Link></li>
        <li><Link to="/add">Add Employee</Link></li>
      </ul>
    )
  }
}

修改完这两处之后，再点击导航链接，Welcome 和 Employees 组件应该就能正常显示啦。另外注意你 Menu 里还有一个/add的链接，之后如果需要实现添加员工的功能，记得在 App 里补上对应的 Route 配置哦～

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