-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
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
Make a "no match" guide #4698
Comments
Hey Ryan.
|
It would also be helpful to see some example of handling non-matches in the route-config sample. I got part of the way there by wrapping the |
I have a simple video demonstrating the "Not Found" page. Hopefully this is useful. https://www.youtube.com/watch?v=sUauVes2aC4&list=PL8vZpHuqa_hPpKUHFlyPkiI4MPexAMhvc&index=3 |
Would love to see this guide, especially solution for the first case in the list. |
I've extracted a small sample from my app that demonstrates the first case. A nested "not-found" page. @ryanflorence suggested this solution in #4685 (comment) The trick is to redirect to the same page including state ( I've typed this up on GitHub, so may contain typos. const NotFound = () => <div className="not_found"><h1>Not Found</h1></div>;
const RouteNotFound = () => <Redirect to={{ state: { notFoundError: true } }} />;
const CaptureRouteNotFound = withRouter(({children, location}) => {
return location && location.state && location.state.notFoundError ? <NotFound /> : children;
});
const Settings = () => {
return (
<Switch>
<Route path="/settings/account" render={() => <h1>Account Settings</h1>} />
<Route path="/settings/profile" render={() => <h1>Profile Settings</h1>} />
<RouteNotFound />
</Switch>
);
};
const AppShell = ({children}) => {
return (
<div className="application">
<header>Application</header>
{children}
</div>
);
};
const Application = () => {
return (
<Router>
<CaptureRouteNotFound>
<AppShell>
<Switch>
<Route path="/settings" render={() => <Settings />} />
<Route path="/profile" render={() => <h1>User Profile</h1>} />
<RouteNotFound />
</Switch>
</AppShell>
</CaptureRouteNotFound>
</Router>
);
}; |
@s0meone that's a great example, thank you! |
@s0meone its best solution for me! big thx |
I ended up combining a couple of the solutions here to build a "withStatus" higher-order component. |
@s0meone I am struggling to understand the benefit of your approach. Since |
@iamvanja I'm using the state to determine if we need to render the |
@s0meone That was the same idea I had with the example on top :). Edit: Sometimes full screen error messages are cooler :D. |
@s0meone I see now how this pattern is useful and powerful. Thanks! |
I tried @s0meone 's approach, but location.state is always undefined, whether I'm hitting a defined route or not. |
I'm a little confused - how do I create a 404 page without a |
I am not quite sure what @s0meone 's HOC state component will give me over just rendering the |
@s0meone i have created a snippet https://codesandbox.io/s/j4y482yl43 for some reason i can't use your technique can you please tell me is it good approach |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
#4685
The intuition about "not found" for me is changing with client side routing, but we still need to show people how to do the "old way". I'm going to write a guide for this, just making some notes here:
The text was updated successfully, but these errors were encountered: