Question

在升级到React-Router 1的过程中，我无法再查看任何子路由。是什么导致/about显示与下面示例代码中/相同的内容？

import React from 'react/addons';
import {Route, Router} from 'react-router';

var App = React.createClass({
    render: function() {
        console.log(this.props.children);

        return (
            <div id='app'>
                Testing!
                {this.props.children}
            </div>
        );
    }
});

var About = React.createClass({
    render: function() {
        return (
            <h1>About</h1>
        );
    }
});

React.render((
    <Router>
        <Route path='/' component={App}>
            <Route path='/about' component={About} />
        </Route>
    </Router>
), document.body);

Answer 1

事实证明，路由仍然存在，但是在哈希之后，所以转到/#/about会起作用。要解决此问题，请先将以上代码修改为：

import history from './history';
import React from 'react/addons';
import {Route, Router} from 'react-router';

var App = React.createClass({
    render: function() {
        console.log(this.props.children);

        return (
            <div id='app'>
                Testing!
                {this.props.children}
            </div>
        );
    }
});

var About = React.createClass({
    render: function() {
        return (
            <h1>About</h1>
        );
    }
});

React.render((
    <Router history={history}>
        <Route path='/' component={App}>
            <Route path='/about' component={About} />
        </Route>
    </Router>
), document.body);

使用以下命令创建history.js文件：

import createBrowserHistory from 'history/lib/createBrowserHistory';

export default createBrowserHistory();

这需要npm历史记录包。随着历史和代码的变化，路线应该有效。

感谢此answer帮助实现此问题。

具有子组件问题的基本React-Router 1.0应用程序

1 个答案: