Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<A> Component causes incorrect error message when used outside of a <Route /> #389

Closed
pixelprogrammer opened this issue Mar 1, 2024 · 3 comments

Comments

@pixelprogrammer
Copy link

pixelprogrammer commented Mar 1, 2024

Describe the bug

When using the <A> component outside the <Route/> you get the following error message:

Uncaught Error: Make sure your app is wrapped in a <Router />

By simply moving the <A> component inside a route component. This error message goes away. It feels like the wrong error message to give to the developer when an <A> component is used in the wrong area.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-udovkl?file=src%2Fcomponents%2Flayout.tsx

Steps to Reproduce the Bug or Issue

    <Router>
        <A href="about">About</A> /* this is causing the error */
        <Route path="/" component={Layout}>
          <Route path="/" component={Home} />
          <Route path="/dashboard" component={Dashboard} />
        </Route>
      </Router>

You can fix this by moving the <A> component into the <Layout /> component

Expected behavior

A more user friendly error message for debugging this.

Screenshots or Videos

No response

Platform

All browsers

Additional context

This feels like a low priority item but I think having this issue documented will help someone else discover what is actually going on in their app.

@Brendan-csel
Copy link
Contributor

Since 0.10 only <Route> components are allowed as children of <Router>. All other components that uses router context (like <A>) need to either be in a route component OR the component passed to the Router root prop.

Configure Your Routes

@pixelprogrammer
Copy link
Author

Since 0.10 only <Route> components are allowed as children of <Router>. All other components that uses router context (like <A>) need to either be in a route component OR the component passed to the Router root prop.

Configure Your Routes

Thats fine. I just find that the error message is not accurate. If thats the case then the error message should include something along those lines for better feedback. Saying "Make sure your app is wrapped in a Router" feels like it may have been an old error message that doesn't really apply anymore.

@ryansolid
Copy link
Member

ryansolid commented Mar 4, 2024

Yeah.. good call. The wording on the error doesn't make sense anymore. That being said I wonder what would make sense. Because it is the same thing it has always been. And its generic, for whenever you use something that reads from the Router context outside of the router.

"Cannot find Router context"
"<A> and 'use' router primitives can be only used inside a Route"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants