React routing showing wrong page-CodePudding

I'm trying to figure out react routing but the routes are still showing the home page instead of the designated page. So when a user uses the route /howto the howto.tsx file's html shows. Right now when you go to /howto it shows the html from _App.tsx. There are also no errors in the console. 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

CodePudding user response：

Next.js uses the file system to enable routing in the app. Next automatically treats every file with the extensions .js, .jsx, .ts, or .tsx under the pages directory as a route. So no react-router-dom is required. Thats most likely the problem. nextjs is confused and react-router-dom overwrites the existing routes.

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

Something like that does the job already

heres another example

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href={"howto"}>click me</Link>
    </div>
  )
}

this is actually everything you would need to route. i would stay with conventions to name the function Home since it is used outside. you dont need to import anything