React-Router No Not Found Route

Question

Consider the following     var AppRoutes          lt Route handler  App  someProp  defaultProp  gt           lt Route path     handler  Page    gt       lt  Route gt         lt Route  handler  App  someProp  defaultProp  gt           lt Route path     handler  Header   gt               lt Route path   withheader  handler  Page    gt           lt  Route gt       lt  Route gt         lt Route handler  App  someProp  defaultProp  gt           lt Route path   area  handler  Area    gt           lt Route path   area  city  handler  Area    gt           lt Route path   area  city  locale  handler  Area    gt           lt Route path   area  city  locale  type  handler  Area    gt       lt  Route gt       I have an App Template  a HeaderTemplate  and Parameterized set of routes with the same handler  within App template    I want to be able to serve 404 routes when something is not found   For example   CA SanFrancisco should be found and handled by Area  whereas  SanFranciscoz should 404    Here s how I quickly test the routes                withheader     SanFranciscoz     ca     CA     CA SanFrancisco     CA SanFrancisco LowerHaight     CA SanFrancisco LowerHaight condo   forEach function path       Router run AppRoutes  path  function Handler  state           var output   React renderToString  lt Handler  gt            console log output    n                  The problem is  SanFranciscoz is always being handled by the Area page  but I want it to 404   Also  if I add a NotFoundRoute to the first route configuration  all the Area pages 404    lt Route handler  App  someProp  defaultProp  gt       lt Route path     handler  Page    gt       lt NotFoundRoute handler  NotFound    gt   lt  Route gt     What am I doing wrong   Here s a gist that can be downloaded and experimented on   https   gist github com adjavaherian aa48e78279acddc25315

User · Answer

With the new version of React Router  using 2 0 1 now   you can use an asterisk as a path to route all  other paths    So it would look like this    lt Route route     component  App  gt       lt Route path   area  component  Area  gt           lt Route path   city  component  City    gt           lt Route path   more-stuff  component  MoreStuff    gt           lt  Route gt       lt Route path     component  NotFoundRoute    gt   lt  Route gt

User · Answer

This answer is for react-router-4  You can wrap all the routes in Switch block  which functions just like the switch-case expression  and renders the component with the first matched route  eg    lt Switch gt         lt Route path     component  home   gt         lt Route path   home  component  home   gt         lt Route component  GenericNotFound   gt      The Default not found component      lt  Switch gt    When to use exact  Without exact    lt Route path   home         component    Home    gt       This will also work for cases like https    lt domain gt  home anyvalue        With exact    lt Route exact path   home         component    Home    gt             This will NOT work for cases like https    lt domain gt  home anyvalue        Only for https    lt url gt  home and https    lt domain gt  home        Now if you are accepting routing parameters  and if it turns out incorrect  you can handle it in the target component itself  eg    lt Route exact path   user  email         render      props    gt   lt ProfilePage     props  user  this state user    gt     gt    Now in ProfilePage js  if this props match params email    desiredValue        lt Redirect to   notFound  component    GenericNotFound   gt       Or you can show some other component here itself      For more details you can go through this code   App js  ProfilePage js

User · Answer

In newer versions of react-router you want to wrap the routes in a Switch which only renders the first matched component  Otherwise you would see multiple components rendered   For example   import React from  react   import ReactDOM from  react-dom   import     BrowserRouter as Router    Route    browserHistory    Switch   from  react-router-dom    import App from    app App   import Welcome from    app Welcome   import NotFound from    app NotFound    const Root        gt       lt Router history  browserHistory  gt       lt Switch gt         lt Route exact path     component  App   gt         lt Route path   welcome  component  Welcome   gt         lt Route component  NotFound   gt       lt  Switch gt     lt  Router gt      ReactDOM render     lt Root  gt     document getElementById  root

User · Answer

DefaultRoute and NotFoundRoute were removed in react-router 1 0 0   I d like to emphasize that the default route with the asterisk has to be last in the current hierarchy level to work  Otherwise it will override all other routes that appear after it in the tree because it s first and matches every path   For react-router 1  2 and 3  If you want to display a 404 and keep the path  Same functionality as NotFoundRoute    lt Route path     exact  true  component  My404Component    gt    If you want to display a 404 page but change the url  Same functionality as DefaultRoute    lt Route path   404  component  My404Component    gt   lt Redirect from     to   404    gt    Example with multiple levels    lt Route path     component  Layout    gt       lt IndexRoute component  MyComponent    gt       lt Route path   users  component  MyComponent  gt           lt Route path  user  id  component  MyComponent    gt           lt Route path     component  UsersNotFound    gt       lt  Route gt       lt Route path   settings  component  MyComponent    gt       lt Route path     exact  true  component  GenericNotFound    gt   lt  Route gt    For react-router 4 and 5  Keep the path   lt Switch gt       lt Route exact path   users  component  MyComponent    gt       lt Route component  GenericNotFound    gt   lt  Switch gt    Redirect to another route  change url    lt Switch gt       lt Route path   users  component  MyComponent    gt       lt Route path   404  component  GenericNotFound    gt       lt Redirect to   404    gt   lt  Switch gt    The order matters

User · Answer

I just had a quick look at your example  but if i understood it the right way you re trying to add 404 routes to dynamic segments  I had the same issue a couple of days ago  found  458 and  1103 and ended up with a hand made check within the render function   if   place  return  lt NotFound   gt     hope that helps

User · Answer

According to the documentation  the route was found  even though the resource wasn t       Note  This is not intended to be used for when a resource is not found  There is a difference between the router not finding a matched path and a valid URL that results in a resource not being found  The url courses 123 is a valid url and results in a matched route  therefore it was  found  as far as routing is concerned  Then  if we fetch some data and discover that the course 123 does not exist  we do not want to transition to a new route  Just like on the server  you go ahead and serve the url but render different UI  and use a different status code   You shouldn t ever try to transition to a NotFoundRoute    So  you could always add a line in the Router run   before React render   to check if the resource is valid  Just pass a prop down to the component or override the Handler component with a custom one to display the NotFound view

[javascript] React-Router: No Not Found Route?

Examples related to javascript

Examples related to reactjs

Examples related to react-router