反应路由显示错误的页面

Question

我试图弄清楚反应路由，但路由仍然显示主页而不是指定页面。因此，当用户使用路由 /howto 时，howto.tsx 文件的 html 会显示。现在，当您转到 /howto 时，它会显示来自 _App.tsx 的 html。控制台中也没有错误。 index.tsx

import React, { Component } from 'react';
import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom';
import MyApp from './_app';
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={< MyApp />}></Route>
                 <Route path='/howto' element={< HowTo />}></Route>
          </Routes>
          </div>
       </Router>
   );
  }
}
  
export default App;

_app.tsx

import type { AppProps } from 'next/app'
import Link from 'next/link'

import '../styles/globals.css'

const MyApp = () => {
  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 href="/howto">
          <button
            onClick={() => {}}
            className="bg-[#FF5C00] opacity-70 h-[10vh] w-[20vh] text-3xl rounded-xl"
          >
            Continue
          </button>
        </Link>
      </div>
    </div>
  )
}

export default MyApp

Answer 1

Next.js 使用文件系统在应用程序中启用路由。 Next 会自动将 pages 目录下每个扩展名为 .js、.jsx、.ts 或 .tsx 的文件视为路由。所以不需要 react-router-dom。这很可能是问题所在。 nextjs 很困惑，react-router-dom 覆盖了现有的路由。

            <div>
                <h1>Home Page</h1>
                <Link href='/article'>
                    <a>Articles</a>
                </Link>
                <br/>
                <Link href='/book'>
                    <a>Books</a>
                </Link>
            </div>

类似的东西已经完成了工作