React.js - React Router 内容没有改变

Question

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

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

这里有两件事：

路由配置中的嵌套路由 Text 和 Icon 前面不应有 /。应该是这样的：<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>
)

React.js - React Router 内容没有改变

React.js - React Router content not changing

javascript

reactjs

react-router