Question

我有以下路线：
routes.jsx

var routes = (
    <Route component={AfApp} path="/">
        <Route path="/testpage" component={Test}/>
        <Route path="testpage" component={Test}/>
    </Route>
);

module.exports = routes;

但是当我导航到mydomain/testpage，mydomain/testpage/和mydomain/whatever时，只渲染 AfApp 组件，而不是 TestPage 组件或任何其他组件！

出了什么问题？的 AfApp.jsx

export default class AfApp extends React.Component {
    render() {
        console.log('render');

        return (

            <div>
                {this.props.children}
            </div>
        );

    }
}

entry.jsx

import routes from './routes.jsx';
ReactDOM.render(<Router routes={routes} />, document.getElementById('content'));

React版本为0.14.0

我页面中包含的bundle.js包含以下内容：

var _appComponentsTestJsx2 = _interopRequireDefault(_appComponentsTestJsx);

var routes = _react2['default'].createElement(
    _reactRouter.Route,
    { component: _appComponentsAfAppJsx2['default'], path: '/' },
    _react2['default'].createElement(_reactRouter.Route, { path: '/testpage', component: _appComponentsTestJsx2['default'] }),
    _react2['default'].createElement(_reactRouter.Route, { path: 'testpage', component: _appComponentsTestJsx2['default'] })
);

Answer 1

出于某种原因，我不明白添加历史记录（当然我必须运行npm install history）会使问题消失：
entry.jsx

import createBrowserHistory from 'history/lib/createBrowserHistory';
ReactDOM.render(<Router history={createBrowserHistory()} routes={routes} />, document.getElementById('content'));

react-router 1.0.0-rc3 - 所有URL都只映射到一个React组件

1 个答案: