从 React Router V2.x 到 V4.x 的转换

Question

在 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')
);

这些是 V4.x 上的路由：

index.jsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './components/App';
import Voting from './components/Voting';
import Results from './components/Results';

const withAppLayout = Component => props => <App><Component {...props} /></App>

const routes = <Switch>
    <Route exact path="/" component={withAppLayout(Voting)} />
    <Route path="/results" component={withAppLayout(Results)} />
</Switch>;

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

App.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});
    }
});

Voting.jsx 文件：

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>;
    }
});

Results.jsx 文件：

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>
    }
});

如何解决这个错误？

Answer 1

一件事是使用：

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

exact 将确保只有该确切路径会匹配。但是如果你在其他人之后有 path="/" ，那么其他人应该首先匹配。这是您使用的真实代码吗？

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

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')
);

然后，如果可行，您可以将 Switch 部分移动到 App Component 中。另外，如果你想使用hash history，你需要使用一个HashRouter，它基本上用hash history初始化一个Router。