Using router

[ZigaVukcevicDev]

Hi,

thank you for the great pack. Is there any way I could use router with navigation links? I kind of don't know how to implement it.

[yipcma]

how about react-router? you can npm i --save-dev react-router and import {Router, Route} from 'react-router'.

[ZigaVukcevicDev]

Thank you for your reply. I tried with this one but I get stuck at

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    {/* add the routes here */}
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

as your pack is having this a bit different:

ReactDOM.render(<App />, document.getElementById('app'));

How could I implement this?

[yipcma]

you basically can save the <Router /> component to a const router and just render the router instead of <App />

[ZigaVukcevicDev]

But I also need to render <App /> as it holds ./components/Main.

Hm, or I can render router in a separate file, like you are doing with index.js?

[yipcma]

the router should go to where the ReactDOM render goes. <App /> already goes to the default route, so shouldn't be a problem. Also, import {browserHistory} from 'react-router' for a hash-less routing.

[ZigaVukcevicDev]

In index.js I did it like this:

// Render the main component into the dom
ReactDOM.render(<App />, document.getElementById('app'));

// Render router into dom
ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App} />
        <Route path="/sign-up" component={SignUp} />
    </Router>
), document.getElementById('app'));

And it looks like it is working if go to url http://localhost:8000/webpack-dev-server/#/sign-up

[weblogixx]

Hi @be-codified,

there is another example located in https://github.com/newtriks/generator-react-webpack/issues/141#issuecomment-143199842. Hope this helps. Infos are a bit older, but excluding the browserHistory (as seen in this thread) it works pretty well.

We will eventually add a wiki to show common configurations, this would be one of them.

Hope this helps.