React-router: Default/404 route is always rendering

[lumio]

Version

react-router-dom 4.1.1
react-redux 5.0.4

Steps to reproduce

ReactDOM.render(
  <Provider store={ store }>
    <Router>
      <Page>
        <Route exact path='/' component={ Home } />
        <Route exact path='/builder' component={ Builder } />
        <Route exact path='/form/:formId' component={ Form } />
        <Route component={ NotFound } />
      </Page>
    </Router>
  </Provider>,
  document.getElementById( 'root' ),
);

Expected Behavior

The last Route should only render, if there is no other match.

Actual Behavior

The last Route renders no matter what.

[yasserkaddour]

This is the correct behavior, for your expected behavior use Switch

<Switch>
  <Route exact path='/' component={ Home } />
  <Route exact path='/builder' component={ Builder } />
  <Route exact path='/form/:formId' component={ Form } />
  <Route component={ NotFound } />
</Switch>

[lumio]

Ah, it seems I've missed the Switch component. Thank you

[hasanmumin]

<BrowserRouter>
                <Switch>
                    <Workspace>
                        <Route exact path='/' component={Dashboard} />
                        {routes}
                        <Route component={NotFound} />
                    </Workspace>
                </Switch>
            </BrowserRouter>

When i use custom component, it is still happening. Any idea or solution ?

[lumio]

Your Switch might have problems with Workspace. As far as I know the Switch component should only contain Routes and no other elements.

Try

<BrowserRouter>
    <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route component={NotFound} />
    </Switch>
</BrowserRouter>

[hasanmumin]

@lumio i don't this it is "mandatory". You can use even a "div" instead of "Switch". this is not the case.

[hasanmumin]

if fixed problem by

<BrowserRouter>
<Workspace>
<Switch>
<Route exact path='/' component={Dashboard} />
{routes}
<Route component={NotFound} />
</Switch>
</Workspace>
</BrowserRouter>

and => export default Workspace to export default withRouter(Workspace)

[omermindivanli]

Hi Hasan,

Thanks for your suggestion. I am gonna do that as much as possible. I have
a little problem. I will open an issue. Could you have a look to that?
https://github.com/mndvn/visioncenter.se/issues/4

Best Regards...

On 12 January 2018 at 04:42, Hasan Mumin [e-mail] wrote:

if fixed problem by

{routes}

and export default Workspace to export default withRouter(Workspace)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/5013#issuecomment-357118342,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXSh6y2pXiCjbEqPamPzBUbWgHDA2tCNks5tJrhsgaJpZM4NFMdB
.