Umstellung von React Router V2.x auf V4.x

Question

Nach der Aktualisierung von React Router V2.x auf V4.x gehen alle Routen auf die Hauptseite.

Hier ist die Route auf 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') 
); 

Und das sind Strecken, auf V4.x:

index.jsx Datei:

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 Datei:

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 Datei:

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 Datei:

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

Wie um diesen Fehler zu beheben?

Answer 1

Eine Sache wäre zu verwenden:

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

Die genaue wird sicherstellen, dass nur der genaue Pfad übereinstimmen wird. Aber wenn Sie den Pfad = "/" nach den anderen haben, sollten die anderen jedoch zuerst übereinstimmen. Ist das der echte Code, den Sie verwenden?

Bearbeiten: Siehe eine vollständige Version unten.

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

Dann, wenn das klappt, können Sie den Switch-Teil in eine App-Komponente verschieben. Wenn Sie den Hash-Verlauf verwenden möchten, müssen Sie einen HashRouter verwenden, der einen Router mit einem Hash-Verlauf initialisiert.