React

React: The href attribute requires a valid value to be accessible

by

The React warning “The href attribute requires a valid value to be accessible” means you didn’t put a valid URL path in an href attribute for an <a> tag. To fix this, make sure your href attribute starts with a forward slash (/). If you’re trying to simulate a link but don’t actually want it … Read more

react-router-dom: Functions are not valid as a React child

by

The react-router-dom warning “Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.” is caused by setting the element property of a <Route> component to the name of the component rather than … Read more

React: Matched leaf route does not have an element

by

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

Full-Stack Example: Secure your FastAPI / React app with SuperTokens

by

The code for this article is a template repository on GitHub, and can be found here: https://github.com/jmgraff/fastapi-strawberry-urql-supertokens. Feel free to use it as a starting point for your own apps. SuperTokens is an open source authentication solution for the apps you build. You might be interested in something like SuperTokens if: If any of that … Read more

React: No routes matched location

by

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

React: Adjacent JSX elements must be wrapped in an enclosing tag

by

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

React: A Route is only ever to be used as the child of a Routes element

by

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

React: useHref() may only be used in the context of a component

by

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

React: [div] is not a component

by

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