Reactjs 从React路由器V2.x到V4.x的转换

在V4.x上更新React Router V2.x后，所有路由都会转到主页面

以下是V2.x上的路线：

import {Router, Route, hashHistory } from 'react-router'

const routes = <Route component={App}>
  <Route path="/results" component={Results} />
  <Route path="/" component={Voting} />
</Route>;

ReactDOM.render(
  <Router history={hashHistory}>{routes}</Router>,
  document.getElementById('app')
);

Voting.jsx文件：

import React from 'react';
import {List} from 'immutable';

const pair = List.of('Trainspotting', '28 Days Later');

export default React.createClass({
    render: function () {
        console.log(this.props.children);
        return React.cloneElement(this.props.children, {pair: pair});
    }
});

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Winner from './Winner';
import Vote from './Vote';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>
            {this.props.winner ?
                            <Winner ref="winner" winner={this.props.winner} /> :
                            <Vote {...this.props} />
            }
        </div>;
    }
});

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>Hello from results!</div>
    }
});

Results.jsx文件：

import React from 'react';
import {List} from 'immutable';

const pair = List.of('Trainspotting', '28 Days Later');

export default React.createClass({
    render: function () {
        console.log(this.props.children);
        return React.cloneElement(this.props.children, {pair: pair});
    }
});

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Winner from './Winner';
import Vote from './Vote';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>
            {this.props.winner ?
                            <Winner ref="winner" winner={this.props.winner} /> :
                            <Vote {...this.props} />
            }
        </div>;
    }
});

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>Hello from results!</div>
    }
});

---

如何修复此错误？

一件事是使用：

<Route exact path="/" component={withAppLayout(Voting)} />

精确路径将确保只有该精确路径匹配。但是如果在其他路径之后有路径=/的话，那么其他路径应该首先匹配。这是你正在使用的真实代码吗

编辑：请参阅下面的完整版本

import {BrowserRouter, Route, Switch} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Voting} />
            <Route path="/results" component={Results} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);

---

然后，如果成功，您可以将交换机部分移动到应用程序组件中。另外，如果你想使用哈希历史记录，你需要使用一个基本上用哈希历史记录初始化路由器的哈希路由器。

是的，这是我使用的代码，添加精确的路径不起作用，/results路径也会进入主页面。因为我们在使用BrowserRouter，你传递的历史记录无论如何都不会被使用，它应该在你的控制台上打印一条警告。不管怎样我都会把它拿走，因为它什么都没用。或者使用路由器，因为它允许您提供自定义历史记录。而且，当jsx是多行的时候，我总是用括号把它括起来，也许只是为了以防万一，我们永远都不知道！此外，路由器没有组件道具，所以只需将其移除，这可能会导致您的问题，因为应用组件也是由withAppLayout HOC返回的。请给出详细答案，以及在我的情况下，路由应该是什么样子？组件投票和“结果”是应用组件的子组件，因此路由器将无法工作。