0

I am new to React and currently working on a navigation bar. I have index.js which is my startup file

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import history from 'history';
import Routes from './routes/index';
import Template from './containers/Template';

ReactDOM.render( 
  (
    <BrowserRouter 
        history={history}
        routes={Routes}
    >
        <Template />
    </BrowserRouter>
  ),document.getElementById('root')
);

the routes are imported from the routes/index.js file which comes like this

import React from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import Template from '../containers/Template';
import Home from '../containers/Home';
import Profile from '../containers/Profile';

const createRoutes = () => {
  return (
      <BrowserRouter>
      <Switch>
        <Route path= '/' component= {Template}/>
        <Route path= '/' component={Home}/>
        <Route path= {'/profile'} component={Profile}/>  
      </Switch>
      </BrowserRouter>
  )
}


const Routes = createRoutes();

export default Routes;

My main problem is that when I am using chrome and React Developer tools I can see the routes related to the BrowserRouter object as follows Routes in the Browser element inspection

But I cannot open any of the specified routes always getting "Cannot get /profile", note I am using webpack as a web development bundle.

Ayman
  • 13
  • 6
  • A navigation bar would have Link tag's right, why are you putting a router for your navbar. Routes file would be different and independent of any component. – VivekN Jun 06 '17 at 17:26
  • I think it has to do with you passing `` to itself. That and I believe you need to specify the history object `import createHistory from 'history/createBrowserHistory'`. Furthermore looking at the API `` does not accept a `history` prop. https://reacttraining.com/react-router/web/api/BrowserRouter – rockchalkwushock Jun 06 '17 at 17:27
  • Thank you both guys I just read this article were it stated what @VivekN said https://medium.freecodecamp.com/you-might-not-need-react-router-38673620f3d that I can use the react Object to manipulate the pages without a router – Ayman Jun 06 '17 at 17:37
  • @rockchalkwushock yes just noticed that but it never stated any errors upon adding it so I should basically create a class that imports history and extends it.. – Ayman Jun 06 '17 at 17:39

1 Answers1

0

What is happening here is your webpack-dev-server is trying to serve you an html page called /profile which does not exist as you are using a single page app.

Take a look at this link but it comes down to the fact that this is expected behaviour from the webpack-dev-server as the /profile html page does not exist.

In order to get this kind of behaviour to work you need to implement server-side rendering or you could use React-Router's hash location

Ali
  • 633
  • 1
  • 9
  • 20
  • Thank you!! Yeah now it looks like a totally normal behavior, but if I added the routes in express.js would it be a one page website anymore?, I have already set historyApiFallback to true in my webpack config file – Ayman Jun 06 '17 at 17:31
  • What you would need to do is re-route the user back into your single page app's root and let your app do the routing on the client side. Take a look at this [answer](https://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing) which should help you out – Ali Jun 06 '17 at 17:33
  • Also if this answer helped you I would appreciate it if you accepted this answer! – Ali Jun 06 '17 at 17:48
  • Sure Thank you again! I am currently figuring out hot to re-rute my app through the react client side, I''ll check the answer onwards and maybe add some in a comment here – Ayman Jun 06 '17 at 17:54
  • 1
    With the help of this https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually was able to re-route onto my main page and the problem was solved – Ayman Jun 07 '17 at 06:27