我试图在我的MERN堆栈应用程序上使用React 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>
)
}
}
从快递进入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')
})
无论我访问哪条路线(即使是未定义的路线),也会渲染App.jsx的内容。看来我在这里做错了什么让hashHistory无法正常工作。我使用的是React-Router 2.6.1
答案 0 :(得分:0)
如果您查看代码,您可以看到您的路由器首先正在安装应用程序组件,正确
<Router history={hashHistory}>
<Route path='/' component={App}>
...
然后你在App组件中有这个:
{this.props.children}
因此,路由器的反应方式是使用App.js作为容器,在其中安装其他组件。
例如,如果您转到/联系人,您的树将如下所示
<div> //This is the app component
<p>Text</p>
<ContactsIndex> // Whatever route you render goes here...
</div>
如果你想在每条路线上只渲染一棵新树,那么使用当前的实现,你可以将App.js div保存为你网页的包装。