node.js - 所有 React Router 和 hashHistory 路由都重定向到同一组件

Question

我正在尝试在我的 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>
    )
  }
}

从express进入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

Answer 1

如果您查看代码，您可以看到您的路由器首先安装应用程序组件，对吧

<Router history={hashHistory}>
    <Route path='/' component={App}>
...

然后你的应用程序组件中就有了这个:

{this.props.children}

因此，React Router 的工作方式是使用 App.js 作为容器，您可以在其中安装其他组件。

例如，如果您转到/contacts，您的树将如下所示

<div>  //This is the app component
    <p>Text</p>
    <ContactsIndex> // Whatever route you render goes here...
</div>

如果您只想在每个路由上渲染一棵新树，那么使用当前的实现，您可以将 App.js div 保留为页面的包装器。