Estoy tratando de usar React Router en mi aplicación de pila MERN. Tengo problemas ya que todas las rutas representan el mismo componente.
Enrutador (índice.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")); }Aplicación.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> ) } }Entrada de express a 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 importa qué ruta visite (incluso las que no están definidas), se representan los contenidos de App.jsx. Parece que estoy haciendo algo incorrectamente aquí que hace que hashHistory no funcione. Estoy usando React-Router 2.6.1
Si observa su código, puede ver que su enrutador primero está montando el componente de la aplicación, a la derecha
<Router history={hashHistory}> <Route path='/' component={App}> ...Entonces tienes esto dentro del componente de tu aplicación:
{this.props.children}Entonces, la forma en que funciona el enrutador de reacción es que usa App.js como un contenedor dentro del cual está montando los otros componentes.
Entonces, por ejemplo, si vas a /contactos, tu árbol se verá así
<div> //This is the app component <p>Text</p> <ContactsIndex> // Whatever route you render goes here... </div>Si desea representar solo un árbol nuevo en cada ruta, con esta implementación actual puede mantener el div App.js como contenedor para sus páginas.