React Router v6 路由始终识别为"/"的问题求助

API 探路者

2026-7-30

问题解决：React Router v6路由始终匹配"/"的问题

问题根源

你在Web项目中错误使用了react-router-native——这个库是专门为React Native移动端应用设计的，并不适用于Web浏览器环境。NativeRouter无法识别浏览器的URL路径，因此无论访问哪个路径，它都会默认识别为根路径"/"，导致路由匹配失败。

修复步骤

1. 替换路由依赖

卸载react-router-native，安装Web环境专用的react-router-dom：

npm uninstall react-router-native
npm install react-router-dom

2. 修改入口文件（index.js）

将NativeRouter替换为react-router-dom提供的BrowserRouter：

import React from 'react';
import {createRoot} from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App /> 
    </BrowserRouter>
  </React.StrictMode>
);

3. 更新App.js的路由导入

把react-router-native的路由组件替换为react-router-dom的：

import {Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 可选：添加根路径路由，若不需要可移除 */}
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About/>} />
    </Routes>
  )
}

function Home() {
  return (<div style={{ padding: 20 }}>
        <h2>Home View</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adip.</p>
    </div>
  );
}

function About() {
  return (
    <div style={{ padding: 20 }}>
      <h2>About View</h2>
      <p>ABOOOOUT.</p>
    </div>
  );
}

export default App;