Home
Support Forums

ERROR netlify with react router dom v6 or i missing something?

Hi, I have the same react repository on two hosts

but in netlify I get an error when I try to access a sub-page directly
here is the example

i create this app with 3 pages

<Route path="/" element={}/> <Route path="/about" element={}/> <Route path="/profile" element={}/>

this is the access link

when I try to access “about” or the others
https://ecstatic-ptolemy-557fae.netlify.app/about
I get this error

“Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.”


I know I don’t have a 404 page, but I’m still trying to access a page that does exist

I’m sure the problem may be from netlify
since I uploaded the same repository to a different host and if I can access the page
https://testerssssa.herokuapp.com/about
I hope you can solve this soon or if it is my mistake, clarify the doubt and who can also arise
Thank you

Hi @holakase

Welcome to the forums

In the case of a React (or other) SPA, the page/route (e.g /about) doesn’t actually exist (i.e. it isn’t a file). React Router is handling all the routing.

The solution (as covered in this post and this documentation) is to create a rewrite rule either in a file called _redirects placed in the public directory of the repository, or a netlify.toml file placed at the root of the repository.

the page if it exists in a file
still should I do what you mention?

    <Router>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/about" element={<About />}/>
        <Route path="/profile" element={<Profile />}/>
      </Routes>
    </Router>
import React from 'react'

function About() {
    return (
        <div>
            ABOUT
        </div>
    )
}

export default About

The route exists only.

When I said doesn’t actually exist I mean there isn’t a path/directory/file called /about.html, or /about/index.html that is an actual existing file.

Yes.

Create a file called _redirects in the public directory of your projects with the line

/*    /index.html    200

ok thanks friend coelmay

So every time I want to host a react app in “netlify”, do I have to do this, to directly access the subpages?
in this case it is something that needs exclusively netlify

Yes, to directly access routes (rather than files) for React, Vue, etc, the above rewrite needs to exist.

1 Like