React路由报No routes matched location "/" 页面卡死如何修复

你代码里一共有4处问题，共同导致了路由报错、页面卡死无响应：

• 根路径/未配置匹配路由，访问站点首页时React Router找不到对应渲染规则，直接抛出No routes matched location "/"错误
• Table组件存在无限递归调用问题：你自定义的组件名就是Table，组件内部返回的根标签又写了<Table>，React会判定为调用组件自身，反复渲染直到栈溢出，直接把页面卡挂
• 你代码里写的带striped/bordered属性的<Table>是React Bootstrap的组件，既没有做导入，还和自定义组件重名，就算没有递归问题也会报找不到组件的错误
• BrowserRouter（你代码里重命名为Router）的放置位置错误，这个组件是路由上下文容器，全局只需要在应用最外层声明一次，不应该包裹在Navbar这种业务组件内部

1. 调整全局路由容器位置 #

把BrowserRouter从Navbar组件中移除，挪到应用根组件（通常是App.jsx或者main.jsx）的最外层，包裹所有需要用到路由能力的组件。

2. 重写Table组件 #

重命名自定义组件避免命名冲突，正确导入React Bootstrap的Table组件，修复后代码：

// 如果没装react-bootstrap先执行安装命令：npm install react-bootstrap bootstrap
import React from "react";
import { Table as BsTable } from "react-bootstrap"; // 导入时重命名，避免和自定义组件重名

// 自定义组件改名，不要和第三方组件同名
function DataTable() {
    return (
        <BsTable striped bordered hover>
            <thead>
                <tr>
                    <th>Text No</th>
                    <th>TextArea</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Smith</td>
                </tr>
            </tbody>
        </BsTable>
    )
}
export default DataTable;

3. 修复Navbar组件 #

移除内部包裹的Router，补全根路径路由，把普通a标签的首页导航换成路由Link组件，引入修复后的DataTable：

import { Routes, Route, Link } from 'react-router-dom';
import DataTable from "./DataTable";

// 首页组件可替换为你自己的实际首页内容
function Home() {
  return <div>这是首页</div>
}

function Navbar(props) {
    return (
        <>
            <nav className="navbar navbar-expand-lg bg-light">
                <div className="container-fluid">
                    <a className="navbar-brand">{props.title}</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mb-lg-0">
                            <li className="nav-item">
                                <Link to="/" className="nav-link active" aria-current="page">Home</Link>
                            </li>
                        </ul>
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link to="/Table" className="nav-link">Data</Link>
                            </li>
                        </ul>
                        <form className="d-flex" role="search">
                            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                            <button className="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/Table" element={<DataTable />} />
            </Routes>
        </>
    )
}
export default Navbar;

补充说明：React Router v6及以上版本默认就是路由精确匹配，不需要额外加exact属性，写了也不会有兼容问题。如果需要导航链接自动根据当前路径加激活样式，可以把Link换成NavLink组件，不需要自己手动维护active类名。

4. 根组件配置参考 #

App.jsx里配置全局路由容器：

import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar';
// 记得引入bootstrap的样式，否则组件样式不生效
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Router>
      <Navbar title="数据管理系统" />
    </Router>
  )
}
export default App;

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