React路由异常：访问指定路径仍显示首页问题求助

核心问题：路由体系混用冲突 #

你同时使用了react-router-dom的路由系统和Next.js的路由组件，两者完全不兼容：

• 入口文件index.tsx基于react-router-dom的BrowserRouter、Routes、Route实现路由
• 但_app.tsx里导入的是Next.js专属的next/link组件，在普通React+react-router-dom的环境下无法正常工作，会导致路由跳转逻辑异常。

另外，_app.tsx是Next.js的特殊约定文件，普通React项目不需要这种命名的文件，建议重命名为Home.tsx之类的常规名称，避免混淆。

具体修复步骤 #

1. 修正首页组件（重命名_app.tsx为Home.tsx） #

替换Next.js的Link为react-router-dom的Link，适配当前路由体系：

// 重命名为Home.tsx
import { Link } from 'react-router-dom';
import '../styles/globals.css';

const Home = () => {
  return (
    <div>
      <div className="flex flex-col justify-center items-center h-[50vh]">
        <p className="text-black text-9xl">
          Beebate
        </p>
      </div>
      <div className="flex flex-col justify-center items-center h-[10vh]">
        <Link to="/howto">
          <button
            className="bg-[#FF5C00] opacity-70 h-[10vh] w-[20vh] text-3xl rounded-xl"
          >
            Continue
          </button>
        </Link>
      </div>
    </div>
  )
}

export default Home;

2. 更新入口文件index.tsx #

同步修改组件导入和路由配置：

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import HowTo from './howto';
  
class App extends Component {
  render() {
    return (
       <Router>
           <div className="App">
            <ul className="App-header">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/howto">How to</Link>
              </li>
            </ul>
           <Routes>
                 <Route path='/' element={<Home />}></Route>
                 <Route path='/howto' element={<HowTo />}></Route>
          </Routes>
          </div>
       </Router>
   );
  }
}
  
export default App;

3. 验证修复 #

重启开发服务器后，点击导航栏的"How to"按钮或直接访问/howto路径，即可正常显示howto.tsx的内容。

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