React路由问题：点击导航栏路径更新但对应组件未渲染求助

我一眼就看到了两个关键问题导致你的路由组件无法正常渲染，咱们一步步来修复：

问题1：Route组件的属性名写错了 #

你在App.js里给Route传的是大写的Component，但React Router的Route组件接受的是小写的component属性——这个大小写错误会直接导致React无法识别你要渲染的目标组件。

问题2：重复嵌套了Router组件 #

你的index.js里已经用<Router>包裹了<App>，但App.js内部又再次嵌套了一层<Router>。多层Router会打乱路由上下文的传递，导致路径匹配逻辑失效。

额外小问题（不影响路由但建议修复） #

React中DOM元素的类名应该用className而非原生的class，比如navbar组件里的<nav class="navbar...">要改成<nav className="navbar...">，避免控制台出现不必要的警告。

修改后的完整代码： #

App.js（修复Route属性+移除重复Router）

import React, { Component } from "react";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import NavBar from "./Components/navBar";
import Header from "./Components/ddrHeader";
import Home from "./Components/home";
import Plan from "./Components/plan";
import Waiting from "./Components/waiting";
import "./App.css";

class App extends Component {
  render() {
    return (
      <Router>
        <React.Fragment>
          <NavBar />
          <Switch>
            {/* 把大写Component改为小写component */}
            <Route exact path="/" component={Home} />
            <Route path="/ddr" component={Header} />
            <Route path="/plan" component={Plan} />
            <Route path="/waiting" component={Waiting} />
          </Switch>
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

index.js（移除外层重复的Router）

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import App from "./App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
serviceWorker.register();

NavBar.js（修复class为className）

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";

class NavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
        <ul className="navbar-nav">
          <li className="nav-item active">
            <Link className="nav-link" to="/">
              Home<span className="sr-only">(current)</span>
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/ddr">
              DDR 
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/plan">
              Plan 
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/waiting">
              Waiting 
            </Link>
          </li>
        </ul>
      </nav>
    );
  }
}

export default NavBar;

完成这些修改后，点击导航栏的链接应该就能正常渲染对应的组件了。

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