404 custom page not working with useContext and React Router - reactjs

Question

If I type in a URL that doesn't exist in my app, it sends me to a custom 404 Not Found page.
However, when I wrap my Navbar with <User.Provider value={value}> .... </User.Provider>, the 404 Not Found component appears on all pages.
Basically, I don't want the NoMatch component to appear on all other pages, only when a url does not exist/match with my app's navbar.
So if I type in localhost:5000/this-does-not-exist-12345212wergdv
it should take me to the custom component, NoMatch.
Code sandbox link.
https://codesandbox.io/s/delicate-sea-b2r96?file=/src/App.js
Anyone know how I can solve this? Thanks for any help.
My code below.
UserContext.jsx code
import React from "react";
export const User = React.createContext(null);
Home.jsx code
import React from "react";
import {User} from "../auth/UserContext";
const Home = props => {
const {user} = React.useContext(User);
return (
<div>
<h4>This is Home page</h4>
<h4>User: {JSON.stringify({user})}</h4>
</div>
);
}
export default Home;
Navbar.jsx code
import React from "react";
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect,
useLocation,
useHistory
} from "react-router-dom";
import {User} from "../auth/UserContext";
import Home from "../pages/Home";
const Navbar = React.memo(props => {
const [user, setUser] = React.useState(null);
const value = React.useMemo(() => ({user, setUser}), [user, setUser]);
const history = useHistory();
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/old-match">Old Match, to be redirected</Link>
</li>
<li>
<Link to="/will-match">Will Match</Link>
</li>
<li>
<Link to="/will-not-match">Will Not Match</Link>
</li>
<li>
<Link to="/also/will/not/match">Also Will Not Match</Link>
</li>
</ul>
<Switch>
<User.Provider value = {value}>
<Route exact path="/">
<Home />
</Route>
<Route path="/old-match">
<Redirect to="/will-match" />
</Route>
<Route path="/will-match">
<WillMatch />
</Route>
<Route path="*">
<NoMatch />
</Route>
</User.Provider>
</Switch>
</div>
</Router>
);
})
function WillMatch() {
return <h3>Matched!</h3>;
}
function NoMatch() {
let location = useLocation();
return (
<div>
<h3>
No match for <code>{location.pathname}</code>
</h3>
</div>
);
}
export default Navbar;
App.jsx page
import React from "react";
import Navbar from "./components/Navbar";
export default function App(props) {
return (
<div>
<Navbar/>
</div>
);
}

Answer 1

The explanation is that the Switch component looks only at its direct children for the path property regardless of whether or not they are Routes.
In this case, since the direct child of Switch is User.Provider with no path property the switch will always just render that child (a switch will always render at least one child).
Now the children of User.Provider will be rendered, and the Switch will no longer have any bearing. This means now that the <Route path="*" /> will ALWAYS render like you are seeing.
Solution:
The solution is to just move the location of the User.Provider to surround the Switch component.
const Navbar = React.memo(props => {
const [user, setUser] = React.useState(null);
const value = React.useMemo(() => ({user, setUser}), [user, setUser]);
const history = useHistory();
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/old-match">Old Match, to be redirected</Link>
</li>
<li>
<Link to="/will-match">Will Match</Link>
</li>
<li>
<Link to="/will-not-match">Will Not Match</Link>
</li>
<li>
<Link to="/also/will/not/match">Also Will Not Match</Link>
</li>
</ul>
<User.Provider value = {value}>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/old-match">
<Redirect to="/will-match" />
</Route>
<Route path="/will-match">
<WillMatch />
</Route>
<Route path="*">
<NoMatch />
</Route>
</Switch>
</User.Provider>
</div>
</Router>
);
})