Good day everyone!

I am going through this tutorial.
There is a code like this:

& lt; Router history = {browserHistory} & gt;
& lt; Route path = '/' component = {App} & gt;
 & lt; IndexRoute component = {Home} / & gt;
 & lt; Route path = 'admin' component = {Admin} / & gt;
 & lt; Route path = 'genre' component = {Genre} / & gt;
& lt; / Route & gt;
& lt; Route path = '*' component = {NotFound} / & gt;

I’m trying to rewrite it in react router v4.

It turns out something like this:

& lt; BrowserRouter & gt;
& lt; Switch & gt;
 & lt; App & gt;
  & lt; Route exact path = '/' component = {Home} / & gt;
  & lt; Route path = '/ admin' component = {Admin} / & gt;
  & lt; Route path = '/ genre' component = {Genre} / & gt;
 & lt; / App & gt;
 & lt; Route component = {NotFound} / & gt;
& lt; / Switch & gt;

This option does not display NotFound.

Can you please tell me what the problem is?

Answer 1, authority 100%

Switch iterates over children and stops the enumeration when the required route is found. You have two nodes in Switch … In general, you need to remove the App wrapper. If you need to wrap some of the pages in App, you can do this:

// high order component
// generates a component that wraps the original one in App
const withAppLayout = Component = & gt; props = & gt; & lt; App & gt; & lt; Component {... props} / & gt; & lt; / App & gt;
& lt; Switch & gt;
 & lt; Route exact path = '/' component = {withAppLayout (Home)} / & gt;
 & lt; Route path = '/ admin' component = {withAppLayout (Admin)} / & gt;
 ...
& lt; / Switch & gt;

You can create a custom Route:

const AppRoute = ({component, ... props}) = & gt; (
 & lt; Route {... props} component = {withAppLayout (component)} / & gt;
);
& lt; Switch & gt;
 & lt; AppRoute exact path = '/' component = {Home} / & gt;
 & lt; AppRoute path = '/ admin' component = {Admin} / & gt;
 ...
& lt; / Switch & gt;

Answer 2

I got this

const LoginLayout = ({... rest}) = & gt; {
 return (
  & lt; Fragment & gt;
   & lt; img src = {logo} className = "logo" alt = "logo" / & gt;
   & lt; div className = "login-container" & gt;
    & lt; div className = "left-side" & gt;
     & lt; ToastContainer className = "toaster" / & gt;
     & lt; Switch & gt;
      & lt; Route path = "/ login / reset" component = {ResetPassword} / & gt;
      & lt; Route path = "/ login / password_reset" component = {NewPassword} / & gt;
      & lt; Route path = "/ login" component = {Login} / & gt;
     & lt; / Switch & gt;
    & lt; / div & gt;
   & lt; / div & gt;
  & lt; / Fragment & gt;
 );
};
export default ({childProps}) = & gt; (
 & lt; Switch & gt;
  & lt; LoginLayout path = "/ login" component = {LoginLayout} / & gt;
  & lt; PrivateRoute path = "/" exact name = "Home" component = {DefaultLayout} / & gt;
 & lt; / Switch & gt;
);

routing works, but it seems like the wrong approach. Could the experts correct it?