React.js-React Router内容不变

Question

我正在尝试建立我的react.js环境以构建UI工具包。 我正在使用react-router，但是由于某些原因，当我单击从Index.js呈现的链接时，URL发生了变化，但是内容保持不变。 它只是继续显示index.js页面中的内容，而不是更改为我单击的链接的内容。 我在控制台上没有收到任何错误消息。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

function run(){
const reactMount = document.getElementById('app');

ReactDOM.render(<Router onUpdate={() => window.scrollTo(0, 0)} history=    {browserHistory} routes={routes}/>, reactMount );
}

new Promise((resolve) => {
if (window.addEventListener) {
  window.addEventListener('DOMContentLoaded', resolve);
} else {
  window.attachEvent('onload', resolve);
}
}).then(run)

routes.js

import React from 'react';
import { IndexRoute, Route } from 'react-router';

import Index from './pages/Index';
import Text from './pages/Text';
import Icon from './pages/Icon';

var routes = (
  <Route  path="/" component={Index}>
      <Route path="/Text" component={Text} />
      <Route path="/Icon" component={Icon} />
  </Route>
);

export default routes;

pages / Index.js

import React from 'react';
import {Link} from 'react-router';

class Index extends React.Component {
render() {

return (
  <div>
  <ul role="nav">
      <li><Link to="/Text">Text</Link></li>
      <li><Link to="/Icon">Icon</Link></li>
    </ul>
  </div>
)
}
}

export default Index;

pages / Text.js

import React from 'react';

class Text extends React.Component {
render() {
return (
  <div>
    <h1>Text</h1>
  </div>
)
}
}

export default Text;

Answer 1

这里有两件事：

• 路由配置中的嵌套路由“文本”和“图标”不应包含/ 。 应该是这样的： <Route path="Text" component={Text} /> 。

• 在您的容器组件（索引）中，您需要访问this.props.children以便该组件知道呈现其子级（嵌套路由）。

   // Index.js return ( <div> <ul role="nav"> <li><Link to="/Text">Text</Link></li> <li><Link to="/Icon">Icon</Link></li> </ul> { this.props.children } </div> )