[Bug]: White screen when typing url that has parameters directly in web browser

[elmcapp]

What version of React Router are you using?

6.8.1

Steps to Reproduce

1.) If I was on the home page of my website and I click the Tutorial button it takes me to the tutorials page
2.) If I press the button to go to Tutorial Details it would take me to the tutorial details page and show me details.

export const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<HomeOne />} />
      <Route path={"tutorials"} element={<TutorialsLayout />}>
        <Route
          index
          element={<Tutorials />}
        />
        <Route
          path=":id"
          element={<TutorialDetails />}
        />
      </Route>
    </Route>
  )
);

const HomeOne = () => {
  // the stuff that makes the home page including nav links
  return (
    <div>
    <p>Hello World</p>
         <HashLink className="nav-link" smooth to={'tutorials'}>
            Tutorials
        </HashLink>
  </div>
  )
}

const Tutorials = () => {
  // This component would have links to get to the TutorialDetails
  return (
    <div>
    <p>Hello World</p>
       <HashLink className="nav-link" smooth to={'1'}>
            Go to tutorial details
        </HashLink>
  </div>
  )
}

const TutorialDetails = () => {
  // the stuff that makes the home page including nav links
  return (
    <div>
    <p>Hello World</p>
  </div>
  )
}

Expected Behavior

I expect that if a visitor takes a url for example: http://example.com/tutorials/1 it should take the visitor to the tutorial detail page and show details.

Actual Behavior

1.) If I was on the home page of my website and I click the Tutorial button it takes me to the tutorials page
2.) If I press the button to go to Tutorial Details it would take me to the tutorial details page and show me details.

Now here is where the problem begin. Let's say I copy the url and share it on YouTube. Now someone take that same url and paste it in there browser the page will show white screen.

This only happens if I put the url directly in the web browser. If I was to just press the nav button on the website it will take me where I am suppose to go.

I have attached video of problem.

Screen.Recording.2023-02-07.at.7.56.31.PM.mp4

[bmatasar]

What happens when you try to open/refresh http://localhost:3000/tutorials? If that fails as well, it might be that your server needs to rewrite the calls /* to /, to make sure they hit the index of your app.

[elmcapp]

Looks like this issue may be coming for another Library. I have react-owl-carousel installed and that Library is outdated and throwing javascript errors. After removing that Library everything seem to be working.

[ioanachi]

I have the same problem and no material ui package installed.
I can't access a url with parameters by typing it in the browser, I can access it if it is linked from a page.
Does anyone have any idea why this happens and can help with fixing it?
Thank you!

[bmatasar]

When you type in browser's bar an url like https://mywebsite.org/deep/nested/page?a=1&b=2, the server will try to find the resource at deep/nested/page and serve it. Unless you redirected it to the index of your SPA, it will probably not find it and you get a blank page or maybe a 404 page. Look in the dev tools to see what answer you get from that call, by the way.
React router grabs the navigation when you load the index page of your SPA and it handles the links in the browser, so when you click on a Link to /deep/nested/page?a=1&b=2 from your app you will see no request to the server and everything works as expected.
If this is the case, you need to add some rewrite modules to the server, to make sure all the calls such as https://mywebsite.org/deep/nested/page hit the index page.

You might use rewrite rules such as:
RewriteRule ^(/(manifest.json|favicon.ico|logo\d+.png|static/.+))$ /$1 [L]
RewriteRule !^/.+\.(html|css|js|jpg|png|svg|json|txt)$ /index.html [L]