it-swarm.com.de

Wechsel von Reaktiver 3.x zu 4.x

Wie kann ich von https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js zur Verwendung von https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js wechseln?

Beispiel unter Verwendung von 3.x.

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
            <Redirect from='foo' to='/' />
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

Sieh es in Aktion unter: https://jsfiddle.net/developit/nvpr63eg/

Wenn ich zu einer der von CDN gehosteten 4.x-Versionen wechsle, funktioniert dies nicht (nicht erreichbarer Code nach return-Anweisung).

16
rich

Ich konnte es mit redux konfigurieren, indem ich ein paar Dinge änderte:

Erstens ist browserHistory nicht mehr in react-router definiert. Eine Möglichkeit, es zurückzubekommen, ist die Verwendung des Pakets history.

Sie müssen installieren (redux optional):

npm i -S history react-router react-router-redux

Anstatt browserHistory zu importieren, verwenden Sie Folgendes:

import { createBrowserHistory } from 'history';

Wenn Sie redux verwenden möchten, importieren Sie dieses und fügen Sie es Ihren kombinierten Reduzierern hinzu:

import { routerReducer as routing } from 'react-router-redux';

combineReducers({
  home, about,
  routing, // new
});

Als Nächstes erstellen Sie das history-Objekt

// redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);

// regular
const history = createBrowserHistory();

Ändern Sie dann Ihren Router, um das neue history-Objekt zu verwenden

<Router history={ history } children={ Routes } />

Alles andere sollte gleich sein.


Wenn jemand auf The prop history is marked as required in Router, but its value is undefined. trifft

Dies liegt daran, dass browserHistory nicht mehr in dem reaktionsrouter verfügbar ist.


Verbunden

13
BrunoLM

Dies ist eine ergänzende Antwort auf die oben von Paul S veröffentlichte Antwort. Der Kredit sollte noch für Paul veröffentlicht werden.

Grund m, um die Antwort zu ergänzen, ist bcoz: 

  1. Ich habe Fehler mit BrowserHistory und Link.
  2. Ich musste React-Router-Dom einschließen.
  3. war ein Tippfehler (in Pauls Originalantwort)

garnschritte:

yarn add react-router
yarn add react-router-dom

package.json:

 "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';


//let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props =>
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

 enter image description here

7
Plankton

Es sollte eine Upgrade-Anleitung geben, die näher an der Vollversion liegt. Ich habe Ihren Code für die kommende Beta angepasst, anstatt für das aktuelle Alpha. Die Beta-Version wurde noch nicht veröffentlicht, daher gibt es leider keine gehostete Version von React Router, mit der Sie dies testen können.

let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);
5
Paul S

Sie können dies sicherlich tun, aber Sie müssten einige Ihrer Komponenten und Anwendungslogik neu schreiben, da der Code nicht so läuft, wie er derzeit ist.

Lesen Sie in der offiziellen Dokumentation nach, hier . Es gibt auch eine gute FAQ über diese Änderungen, hier . Hier ist ein Auszug:

Warum die große Veränderung?

tl; dr Deklarative Kompatibilität.

Wir waren noch nie so begeistert von React Router. Wie Sie haben wir viel über React gelernt, seit wir es aufgesammelt haben. Wir haben einen Router gebaut, der am besten zu wissen ist. Was wir am meisten gelernt haben, ist, dass wir React aufgrund seiner deklarativen Komposierbarkeit lieben.

Wenn Sie ein Upgrade durchführen möchten, wird laut einer offiziellen Quelle in Kürze ein Upgrade-Leitfaden bereitgestellt:

Wir glauben sehr stark an die iterative Migration und nicht an die Neuschreibung von Anwendungen. Wir arbeiten an einem Migrationsleitfaden, aber die grundlegende Strategie besteht darin, dass beide Versionen als Tandem ausgeführt werden können (aufgrund von Einschränkungen bei npm veröffentlichen wir die vorherige Version separat, sodass beide installiert werden können).

Sie können Routen nacheinander nehmen und auf die neue API migrieren. Zusätzlich kann das oben erwähnte config-Addon hier helfen.


Gehen Sie in diesem Sinne auf Ihr ursprüngliches Problem zurück: Damit Ihre App-Komponente ordnungsgemäß ausgeführt wird, sollte sie jetzt etwa wie folgt aussehen:

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>
    {props.children}
  </div>

  <Match exactly pattern="/" component={Home} />
  <Match pattern="/map" component={Map} />
  <Match pattern="/settings" component={Settings} />
  <Match pattern="/topics" component={Topics} />

Hoffe das hilft. Viel Glück.


edit: Anscheinend hat @PaulS ein Beispiel für eine zukünftige Version von React-Router v4. Wenn der Beitrag korrekt ist, funktioniert der obige Code in der Zukunft nicht mehr. es funktioniert nur für die aktuell verfügbare Version. Behalten Sie die oben verlinkten Seiten im Auge, um Informationen zu erhalten, wenn RRv4 live geht.

0
Chris

Bei der letzten Version von v4 sind einige Dinge zu beachten, die Ihre jsfiddle betreffen. Die erste Sache ist, dass die Bibliothek als Ganzes getrennt wurde: Web, Native und Core (überall verwenden). Reakt-Router-Dom nur für das Web verwenden. 

2: Die Art und Weise, wie Sie Routen verschachteln, ist ziemlich unterschiedlich. Anstatt Routen in Ihrer übergeordneten Komponente zu verschachteln, was Sie eigentlich nicht tun können, müssen Sie lediglich Ihre übergeordnete Komponente (in diesem Fall BrowserRouter) definieren. Anschließend können Sie in allen Komponenten Routen definieren. Ihre Komponenten definieren jetzt die Hierarchie. Sie können beispielsweise Ihre Haupt- und App-Komponenten folgendermaßen organisieren:

const Main = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

const App = props => (
  <div>
    <Navigation>
      <Link to='/'>Home</Link>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    <Route exact path='/' component={Home}/>
    <Route path='/map' component={Map}/>
    <Route path='/settings' component={Settings}/>
    <Route path='/foo' render={() => (
        <Redirect to="/"/>
    )}/>
  </div>
)

Hoffe das hilft. Bitte schauen Sie sich meinen Fix für Ihr jsfiddle unten an und lassen Sie mich wissen, wenn Sie Fragen haben.

https://jsfiddle.net/bagofcole/kL6m8pjk/12/

Weitere Informationen finden Sie unter: https://reacttraining.com/react-router/web/guides/quick-start

0
bagofcole