Trouble in Routing

Question

I am using react-router-dom and react-router-redux for routing in React. I am unable to route to the relative path. In my case '/login.

Here is the code. https://codesandbox.io/s/y73931q871

Also if I run the code in the local it throws:

score 2 · Answer 1 · edited Apr 20 '18 at 07:10

2

In webpack.config.js, you should not miss historyApiFallback: true for the devServer object. Something like this:

  devServer: {
    compress: true,
    port: 9000,
    host: '0.0.0.0',
    historyApiFallback: true
  },

Also, in your Route configuration, you need to reorder the Routes like

export const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  </Provider>
);

re-order is needed because Switch only renders the first matched route and a path like /login will also match / and hence only render Home all the time, so all paths that are prefixed to other paths need to be placed at the end.

working demo

edited Apr 20 '18 at 07:10

Chasing Unicorn - Anshu

510
2
14

answered Apr 20 '18 at 06:25

Shubham Khatri

211,155
45
305
318

I reordered them for debugging. Sorry. Great! it's working in the codesandbox, but it's throwing the same error in my browser with the local setup. Possibly some version conflicts. I have updated my ques with package.json. Let me know if you can help me with that. Thanks. – Chasing Unicorn - Anshu Apr 20 '18 at 06:38
@ChasingUnicorn, as I said, the errors are not related to Route but to fonts that you might be loading, please check the font that you are loading on login page – Shubham Khatri Apr 20 '18 at 06:39
Also, if fonts loading is the issue, then my Home page would have also thrown the same error. – Chasing Unicorn - Anshu Apr 20 '18 at 06:44
Check this https://stackoverflow.com/questions/45366744/refused-to-load-the-font-datafont-woff-it-violates-the-following-content/45563020 – Shubham Khatri Apr 20 '18 at 06:48
Thanks, @shubham, but that post I already saw. Anyway, I got the solution. Have updated your answer. :) – Chasing Unicorn - Anshu Apr 20 '18 at 07:07

score 0 · Answer 2 · answered Apr 20 '18 at 06:28

According to docs, you should use exact prop with index (/) route.

So the code should looks like this:

export const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  </Provider>
);

score 0 · Answer 3 · edited Apr 23 '18 at 04:51

0

Please modify your home route by the following and it will work as you want

    <Route path="/" component={Home} exact />

edited Apr 23 '18 at 04:51

t13n

293
1
11

answered Apr 20 '18 at 06:33

Gaurav joshi

1,685
11
26

Trouble in Routing

3 Answers3