[Bug]: Upgraded from 6.5 to 6.11: No routes matched location "/[any]" (initial mount)

[malte94]

What version of React Router are you using?

6.11

Steps to Reproduce

1. Build a structure like this in your App.jsx:

  <Routes>
            <Route exact path="/imprint" element={<Imprint />} />
</Routes>

2. Call localhost:3000/imprint directly in your browser (hot reload).
3. On first mount of the App, you initially receive in the console:

No routes matched location "/imprint"

However, the component is mounted correctly.

When navigating between further components, including this one, no console.warn is outputted anymore.

I observed this behaviour after upgrading from 6.5 to 6.11.

Thank you very much I really enjoy using React Router!

Expected Behavior

No warning shall be outputted, since the component is loaded and routed correctly.

Actual Behavior

A console.warn is outputted

[brophdawg11]

Can you provide a reproduction of the issue? This seems to be working for me in https://codesandbox.io/s/staging-https-dryeh9?file=/src/index.js.

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂

[jrmyio]

Ran into the same issue. The problem was I was using <Routes/> as the fallbackElement for <ReactProvider/>. However this is no longer supported in 6.11.

Here you see no error in 6.10:
https://codesandbox.io/s/black-wildflower-cl72nx

Here you see the error as described in the issue (6.11):
https://codesandbox.io/s/epic-goldberg-9kk76g

(make sure you go to /imprint )

[malte94]

@jrmyio Thank you for your reply! I think this issue was fixed with 6.13, since the warning currently does not occur anymore without having changed the structure. Or I forgot what I have changed. It's wrapped in the <BrowserRouter> in our case.