React routing showing wrong page

Question

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

I don't see any issue with this specific code. Can you edit the post to include a more complete minimal reproducible example and exact steps to reproduce any issue? — Drew Reese
– Drew Reese, Commented Nov 29, 2022 at 22:05
import Link from 'next/link' but its routed via react-router-dom try importing Link from react-router-dom — Daniel
– Daniel, Commented Nov 29, 2022 at 22:06
oh wait is that a nextjs? throw out the react-router-dom if so hes not needed in a next app — Daniel
– Daniel, Commented Nov 29, 2022 at 22:12

Daniel · Accepted Answer · 2022-11-29 22:43:06Z

1

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

edited Nov 29, 2022 at 22:43

answered Nov 29, 2022 at 22:02

Daniel

19010 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Over a year ago

I removed the file and the library but /howto is still showing _app.tsx instead of howto.tsx

Daniel Over a year ago

edited the question since the index should something like above. and keep in mind that your filepath is also your url means pages/folder/maybeAnotherFolder/File so "./someSubfolder/AnotherFolder/howto.tsx" would result in href="someSubfolder/AnotherFolder/howto"

Daniel Over a year ago

@Devium freecodecamp.org/news/routing-in-nextjs-beginners-guide has a pretty fast and well explained tutorial to it. Can recommend it

Daniel Over a year ago

I followed the tutorial but 1. I can't import globals.css if I rename _app.tsx to index.tsx and two /howto still shows _app.tsx instead of howto.tsx

Daniel Over a year ago

@Devium you need both _app.tsx and index.tsx!

|

Collectives™ on Stack Overflow

React routing showing wrong page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related