Question

虽然没有报告错误，但单击“转到示例页面”后，“示例”页面不会显示。

但是，如果我不使示例路由成为Main的子路由，则示例页面可以工作，但我不再将主页面作为标题。

任何人都可以看到我的错误在哪里吗？

使用：

   "react": "^0.14.0-beta2",
   "react-dom": "^0.14.0-beta2",
   "react-router": "^1.0.0-beta3"

// Bootstrapping module
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { history } from 'react-router/lib/BrowserHistory';
import Routes from 'routes';

let rootEl = document.getElementById('content');
ReactDom.render(<Routes history={history} />, rootEl);

//Routes.js
import React, { PropTypes, Component } from 'react';
import { Router, Route, Link } from 'react-router';
import Main from 'components/main';
import Example from 'components/example.js';

export default class Routes extends Component {
    static propTypes = {
        history: PropTypes.object.isRequired
    }

render() {
    const { history } = this.props;
    return (
        <Router history={history}>
            <Route path="/" component={Main}>
                <Route path="/example" component={Example}>
                </Route>
        </Route>
        </Router>
    );
 }
}

//Example.js
import React from 'react';
import connectToStores from 'alt/utils/connectToStores';
import DummyStore from 'stores/dummyStore';
import DummyActions from 'actions/dummyActions';

@connectToStores
 class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }
  }

 static getStores(props) {
  return [DummyStore];
 }

 static getPropsFromStores(props) {
   return DummyStore.getState();
 }

render() {   
  return (
  <div>
    <input type="text" value={this.state.name} onChange={this.onChange}/>
    <h1>On example Page: {this.props.name}</h1>
  </div>
  );
 }

onChange = evt => {
  this.setState({name: evt.target.value});
  DummyActions.updateName(evt.target.value);
  }
}

export default Example;

Answer 1

我找到了解决方案，但我想首先添加我非常关心react-router的文档，更不用说一般的反应了。似乎反应框架和相关的增强措施如此流畅，人们无法长期掌握对框架的任何凝聚性理解。

以下是解决方案，它需要更改主要组件以包含子道具：

class Main extends React.Component {
  render() {
    return (
      <div>
        <h1>Main Top Header</h1>
        <Link to='example'>Go to the Example page...</Link>
          {this.props.children} <--- solution
      </div>
    );
  }
}

注意：

截至今天，这一点和它一样好，因为这个框架对我来说太流畅了，当你有嵌套路由时，父路由必须在组件类中包含{this.props.children}。

但是，看来，在反应的世界里，明天这一切都可能无效!!

React-Router 1.0.0beta3子链接无法正常工作

1 个答案: