Saturday, 29 April 2017

All React Router and hashHistory routes redirect to same component

I am trying to use React Router on my MERN stack app am having trouble since all routes are rendering the same component

Router(index.jsx):

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import Home from './components/home.jsx'
import App from './app.jsx'
import ContactsIndex from './components/contacts/contactsIndex.jsx'

if(typeof window !== 'undefined') {
    ReactDOM.render(
    <Router history={hashHistory}>
        <Route path='/' component={App}>
          <IndexRoute component={Home} />
          <Route path='contacts' component={ContactsIndex}/>
        </Route>
    </Router>, document.getElementById("root"));
}

App.jsx

import React from 'react'
import { Router, Route, Link } from 'react-router'
import Home from './components/home.jsx'

export default class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return(
      <div>
        <p>Text</p>
        {this.props.children}
      </div>
    )
  }
}

Entry from express into React:

app.set('views', __dirname + '/views');
app.engine('jsx', require('express-react-views').createEngine())
app.set('view engine', 'jsx')

app.get('*', (req,res) => {
  res.render('index.jsx')
})

No Matter what route I visit(even one that are not defined) the contents of App.jsx are rendered. It seems that I'm doing something incorrectly here which is making hashHistory not work. I'm using React-Router 2.6.1



via John

No comments:

Post a Comment