React router renders the root component specified in index.js always

Question

I am using react-router-dom ("^4.2.2")

import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './appContainer';

ReactDOM.render(<AppContainer />, document.getElementById('root'));

App Container Code

 import React from 'react';
 import App from './App';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import CascadeLocationList from 
 './containers/cascadeLocation/cascadeLocationList'
 import store from './store';

 const AppContainer = () => (
  <Provider store={store}>
   <BrowserRouter>
    <Route path="/" component={LocationList} />
   </BrowserRouter>
  </Provider>
 );

export default AppContainer;

And below is my Route file

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import LocationList from 
'./containers/Location/LocationList'
import CascadeLocationShow from 
'./containers/Location/LocationShow'

 export const routes = () => {
   return (
    <Switch>
      <Route path="/" exact component={App} />
      {/* location routes */}
       <Route path="/fac_locations/:id" component=
        {LocationShow} />
       <Route path="/fac_locations" component={LocationList} 
       />
    </Switch>
   );
  };

I had missed calling {routes()) in my app.js . I have added that now. Even now the issue persists

The page takes the path as "/" and renders the specified component for irrespective of the route i go to. I entered "http://localhost:3001/fac_locations" in my url and checked the path in react console and path is "/" and the component rendered is App always

have you tried moving <Route exact path="/" component={App} /> to the last instead of first — Aaqib
Can you show your updated code, it rather difficult to understand currently — Shubham Khatri
The issue is resolved now:) i had missed rendering routes() function in my app component, the first time i called i had done some typo . Now its getting rendered correctly. — Pallavi Hegde

Pallavi Hegde Pallavi Hegde · Accepted Answer · 2017-11-29T12:17:24

0

votes

I had missed calling {routes()) in my app.js so that was the issue and it works fine now :)

React router renders the root component specified in index.js always

1 Answers