React中如何将./Projects组件关联到app.js？点击路由不显示内容怎么解决

问题根因 #

1. 你在App.js中引入了路由匹配所需的Switch/Route组件，但实际未用于路由规则配置，直接把Home、Projects、About三个页面组件硬编码在Router下，组件渲染和路由路径完全没有绑定，因此路由变化不会触发对应页面的显示切换。
2. 额外冗余代码：Projects组件中导入的BrowserRouter、Route、Switch未被使用，可直接删除。
3. 若你使用的是react-router-dom@v6及以上版本，原v5的Switch组件已被废弃，API用法存在差异也会导致匹配失效。

修复方案 #

如果你使用的是 react-router-dom v5 版本 #

修改App.js的组件逻辑，用Switch包裹Route配置对应路径和组件，注意根路径要加exact做精确匹配：

import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';

function App() {
  return(
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/projects" component={Projects} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

如果你使用的是 react-router-dom v6 及以上版本 #

v6废弃了Switch替换为Routes，且Route需要用element属性传入组件，无需额外加exact默认就是精确匹配，修改App.js如下：

import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';

function App() {
  return(
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

额外检查项 #

确认Navbar组件中Projects对应的Link组件的to属性为/projects，路径大小写和配置的路由完全一致即可。

内容的提问来源于stack exchange，提问作者Ishmael John Lewis