react-router-dom - how set show on everything except 404? - reactjs

Question

I want setup aside element in react-router-dom,
which show on everything page, without 404.
Bellow my code:
<>
<aside>
<*Routes*\>
<*Route* *path*="\*" *element*={<*BookSidebar* />} />
</*Routes*\>
</aside>
<*Routes*\>
<*Route* *element*={<*BooksLayout* />}>
<*Route* *index* *element*={<*BookList* />} />
<*Route* *path*=":id" *element*={<*Book* />} />
<*Route* *path*="new" *element*={<*NewBook* />} />
<*Route* *path*="\*" *element*={<*NotFound* />} />
</*Route*\>
</*Routes*\>
</>
At the moment <*Route* *path*="\*" *element*={<*BookSidebar* />} /> , showed on each pages even NotFound, how I can fix it?

Answer 1

Here's my take on this problem.
If I got it right, you want to render <BookSidebar /> everywhere but on the NotFound page.
What you could do is a logic-oriented rendering based on the useLocation() hook provided by that same React Router!
So, first hand, we'll need to render this on each of our page, and what contains each of our page? App.js here.
So, our code on App.js should look more or less like this:
{aside && (
<aside>
<BookSidebar/>
</aside>
)}
This will allow us to render, or not the BookSidebar component based on the aside state.
Let's add that state, and set it to true, as most of the time, it'll be true.
const [aside, setAside] = useState(true);
We're getting there, all that is left is to detect, at each time the user navigates from a page, if he is on the 404 page or not.
And there's nothing much more convenient for that than useEffect.
But, before that, we need to use the useLocation() hook of React Router, which allows us to know where the user is at any given time, because remember, we need to know if he is or not on the 404 Error page!
const location = useLocation();
This needs to run in the App.js, as it's where we render our Route.
useEffect(() => {
console.log("Location changed! We are now in: ", location.pathname);
if (location.pathname === "/error404path") {
console.log("Detected we were in /error404path, hiding Aside.");
setAside(false);
}
}, [location]);
And that's it! Our logical rendering based on the state that we can, on purpose, turn off based on any conditions, is done and working!