React路由配置求助：自研代码与YouTube教程示例不符，求解答

嘿，刚接触React路由确实容易懵，我来帮你拆解下问题～

首先看你现在的代码，已经导入了react-router-dom的Router、Switch、Route这些关键组件，但根本没在渲染逻辑里用上它们，所以不管你访问什么路径，页面都会固定显示Dashboard，这就是和YouTube示例不一样的核心原因。

先给你修改好的完整App.js代码 #

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Header from "./layout/Header";
import Dashboard from "./users/Dashboard";
import Users from "./users/Users";
import { Provider } from 'react-redux';
import store from '../store';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router> {/* 用Router包裹整个需要路由的应用部分 */}
          <Fragment>
            <Header /> {/* Header放在Switch外面，这样所有页面都会显示Header */}
            <div className="container">
              {/* Switch用来确保只渲染第一个匹配到的路由 */}
              <Switch>
                {/* exact属性确保只有路径完全是"/"时才匹配Dashboard，避免和其他子路径冲突 */}
                <Route exact path="/" component={Dashboard} />
                {/* 访问"/users"时渲染Users组件 */}
                <Route path="/users" component={Users} />
              </Switch>
            </div>
          </Fragment>
        </Router>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

关键部分的解释： #

• Router：必须作为所有路由相关组件的容器，它会监听浏览器地址栏的变化，把路径信息传递给内部的Route组件。你之前没加这个，路由系统根本没法工作。
• Switch：它会从上到下检查每个Route，只渲染第一个匹配当前路径的Route。如果没有Switch，所有匹配路径的Route都会同时渲染，比如路径是/users时，path="/"和path="/users"的组件都会显示，这显然不是你想要的。
• Route的exact属性：这个很重要！比如path="/"如果不加exact，那么所有以/开头的路径（比如/users、/profile）都会匹配到这个路由，导致Dashboard和对应组件同时显示。给首页路由加上exact，就只会在路径完全是/的时候才渲染Dashboard。
• 组件放置位置：把Header放在Switch外面，这样不管你跳转到哪个路由页面，顶部的Header都会一直显示，这是常见的布局方式。

现在你运行代码，访问根路径会显示Dashboard，访问/users就会切换到Users组件啦～

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