React Router Link组件失效求助：URL更新但页面崩溃

从你描述的症状（URL更新但页面崩溃）来看，大概率是路由基础配置缺失或者目标组件本身存在代码错误，下面按涉及的文件逐一排查：

1. 先确认React Router依赖是否安装 #

首先确保项目里已经装了正确的路由包（React Router v6+用react-router-dom），在项目根目录执行：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 检查App.js的核心路由配置 #

App.js必须用BrowserRouter包裹所有路由相关组件，同时要正确配置路由规则。以下是标准的基础配置示例：

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Main from './Main';
import ProductPage from './ProductPage';

function App() {
  return (
    <Router> {/* 这是路由生效的核心包裹层，必须加 */}
      <Routes> {/* React Router v6+用Routes替代旧版的Switch */}
        <Route path="/" element={<Main />} /> {/* 首页路由 */}
        {/* 配置产品详情页路由，路径要和你Link的to属性完全匹配 */}
        <Route path="/products/singleproduct" element={<ProductPage />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 检查Main.js中Link的使用是否正确 #

确保你正确导入了Link组件，且to属性的路径和App.js里配置的路由路径完全一致：

// Main.js
import { Link } from 'react-router-dom';

function Main() {
  return (
    <div>
      {/* to的路径必须和App.js中Route的path严格匹配 */}
      <Link to="/products/singleproduct">查看产品详情</Link>
    </div>
  );
}

export default Main;

4. 排查ProductPage.js的代码错误 #

页面崩溃也可能是目标组件本身有问题，比如语法错误、未定义变量、渲染了无效JSX等。可以先简化组件代码测试：

// ProductPage.js
function ProductPage() {
  return (
    <div>
      <h1>产品详情页测试</h1>
    </div>
  );
}

export default ProductPage;

如果简化后能正常显示，再逐步加回你的业务代码，定位具体错误点。

5. 关键排查技巧 #

打开浏览器控制台（F12）查看具体报错信息——这是定位崩溃原因最直接的方式，控制台会明确告诉你是变量未定义、组件未找到还是其他问题。

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