点击<Link to='/about'>About</Link>后About页面无法显示的技术问题

常见原因及修复步骤 #

1. 未用Router组件包裹整个应用 #

React Router的Link和Route必须在BrowserRouter（或其他Router类型）的上下文环境中才能正常工作。如果你的根组件没有被Router包裹，点击Link只会修改地址栏URL，不会触发对应页面的渲染。

修复方式：在项目入口文件（比如index.js）中用BrowserRouter包裹App组件：

import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

2. Route未被正确包裹（按React Router版本区分） #

• React Router v5：需要用Switch组件包裹所有Route，保证只会匹配第一个符合路径的路由：

import { Switch, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';

function App() {
  return (
    <div>
      <Navbar />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
      </Switch>
    </div>
  );
}

• React Router v6：Switch被替换为Routes，同时component属性改为element，需传入JSX元素：

import { Routes, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';

function App() {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </div>
  );
}

3. 确认About组件正确导入 #

检查App.js中是否正确导入About组件，路径要和实际文件位置匹配：

// 根据你的文件结构调整路径
import About from './components/About';

4. 检查Navbar中的Link导入 #

确保Navbar.js里正确导入了React Router的Link：

import { Link } from 'react-router-dom';

总结 #

优先排查Router包裹的问题，这是最常见的触发原因，再依次检查Route的包裹方式、组件导入路径和Link的导入情况，基本就能解决页面不渲染的问题。

内容的提问来源于stack exchange，提问作者James Olaleye