The react-router-dom error “Matched leaf route at location “/” does not have an element. This means it will render an with a null value by default resulting in an “empty” page.” is caused by not setting the element property of a <Route> component. Fix this by ensuring the element property is set to the element … Read more

The ReactJS error “useNavigate() may be used only in the context of a Router component” occurs when you try to use the useNavigate hook outside a <BrowserRouter> or <HashRouter> component. To fix this, move your <*Router> tags to a higher level component. This error was discovered when working on our SuperTokens tutorial. If you want … Read more

The react-router-dom error “No routes matched location” happens when you have a <Link> element that points to a path that isn’t defined in a <Route>. To fix this, make sure all of your <Link>s point to valid <Route>s. This error was discovered when working on our routing tutorial for React. If you’re new to using … Read more

This common React error occurs when you try to render two top-level tags from your component. JSX can only handle rendering one top-level element per component. Fix this by either wrapping your components in JSX fragments (<>/</>) or an actual tag, such as a <div>. JSX is a pretty revolutionary technology when it comes to … Read more

The React error “Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your in a <Routes>.” happens when you forget your <Routes> tags around your <Route> components. Fix it by adding the <Routes> context around the <Route> components. This error was discovered when … Read more

The React error “Uncaught Error: useHref() may be used only in the context of a component.” occurs when you use a react-router-dom <Link> component outside the context of a <Router> component. To fix this, move all of your links inside the router. This error was discovered when working on our React routes guide. If you … Read more

This react-router-dom error occurs when you put a <div> tag inside the <Routes> component tags. Fix this by making sure only <Route> components are found inside the <Routes> component tags. This error was discovered while working on a guide to add routes to your React app with react-router-dom. If you want more info on implementing … Read more

This error occurs when you have a list of elements that don’t have a key prop defined. This prop tells React which element is which and helps it to understand when to re-render elements. Fix this by adding a key prop to each element and setting it to a value that uniquely identifies the element. … Read more

The code for this article can be found here: https://github.com/jmgraff/strawberry-graphql-chat-app/tree/add-react-routes In this article, we’re going to be taking a look at how to use the popular React routing package react-router-dom to add routes to your app. We’re going to build off of our GraphQL real-time chat app example. If you haven’t read it yet, and … Read more