Separate login page using a HashRouter in action

Question

I would like to add a login page that does not have the application as a parent. This is my current HashRouter setup:

  <Provider store={ store }>
    <HashRouter>
      <App>
        <Route path='/path1' component={ Component1 } />
        <Route path='/path2' component={ Component2 } />
        <Route path='/path3' component={ Component3 } />
      </App>
    </HashRouter>
  </Provider>

If I do this:

  <Provider store={ store }>
    <HashRouter>
      <div>
        <Route path='/login' component={ Login } />
        <App>
          <Route path='/path1' component={ Component1 } />
          <Route path='/path2' component={ Component2 } />
          <Route path='/path3' component={ Component3 } />
        </App>
      </div>
    </HashRouter>
  </Provider>

Then I get the login page above the application. Here is my application component:

const App = ({ children }) => (
  <div>
    <Navbar/>
    <div className='col-md-10 col-md-offset-1'>
      { children }
    </div>
  </div>
)

What is the best way to get a login with a Login component that does not include the application?

Answer 1

Since you are using response-router v4, you need to put your nested routes inside the parent component instead of nesting routes. See this answer for an explanation.

.

<Provider store={ store }>
  <HashRouter>
    <div>
      <Switch>
        <Route path='/login' component={ Login } />
        <Route path='/' component={ App } />
      </Switch>
    </div>
  </HashRouter>
</Provider>

const App = () => (
  <div>
    <Navbar/>
    <div className='col-md-10 col-md-offset-1'>
      <Route path='/path1' component={ Component1 } />
      <Route path='/path2' component={ Component2 } />
      <Route path='/path3' component={ Component3 } />
    </div>
  </div>
)

, <Switch> '/login' '/'. , . , '/login', Login, ( , 'exact' ) '/'.

Update:

. , <Switch> , .

<Provider store={ store }>
  <HashRouter>
    <div>
      <Switch>
        <Route path='/login' component={ Login } />
        <App>
          <Route path='/path1' component={ Component1 } />
          <Route path='/path2' component={ Component2 } />
          <Route path='/path3' component={ Component3 } />
        </App>
      </Switch>
    </div>
  </HashRouter>
</Provider>

Answer 2

.

routes.js

export default () => (
    <Route path="/" component={Layout}>
        <Route component={WebLayout}>
            <IndexRoute component={Home} />
        </Route>
        <Route component={AppLayout}>
            <Route path="account" component={Account} />
        </Route>
        <Route component={SecurityLayout}>
            <Route path="login" component={Login} />
        </Route>
    </Route>
);

layout.js

const Layout = ({ children }) => (
    <div>
        {children}
    </div>
);

applayout.js

const AppLayout = ({ children }) => (
    ...
);

securitylayout.js

const SecurityLayout = ({ children }) => (
    ...
);