Passer du routeur de réaction 3.x à 4.x

Comment puis-je déplacer à l'aide de https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js de l'aide https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js?

Exemple à l'aide de 3.x ci-dessous.

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>

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

Voir en action: https://jsfiddle.net/developit/nvpr63eg/

Si je me déplace à toute de la CAN a accueilli 4.x versions si cela ne fonctionne pas (code inaccessible après l'instruction return).

source d'informationauteur rich

13

J'ai été en mesure de le configurer avec redux en changeant un peu les choses:

D'abord, browserHistory n'est pas défini sur react-router plus. Un moyen de la récupérer est d'utiliser le package history.

Vous aurez besoin d'installer (redux facultatif):
```
npm i -S history react-router react-router-redux
```
Au lieu d'essayer d'importer des browserHistory utilisation:
```
import { createBrowserHistory } from 'history';
```
Si vous souhaitez utiliser redux puis de l'importer et l'ajouter à votre combiné réducteurs:
```
import { routerReducer as routing } from 'react-router-redux';

combineReducers({
  home, about,
  routing, //new
});
```
Ensuite vous créez le history objet
```
//redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);

//regular
const history = createBrowserHistory();
```
Puis changer votre routeur pour utiliser le nouveau history objet
```
<Router history={ history } children={ Routes } />
```
Tout le reste doit être la même.

Si tout le monde court dans The prop history is marked as required in Router, but its value is undefined.

C'est parce que browserHistory n'est plus disponible dans réagissent-routeur, voir le post de l'utilisation de l'histoire paquet.

Liées
- Github ts-réagir-redux-démarrage: Projet qui l'utilise
- La migration de Réagir Routeur 4 avec Redux

C'est un complément de réponse à la Paul S posté ci-dessus.
De crédit doit toujours goto paul pour publication.

Raison m complétant la réponse est bcoz:-

J'ai eu des erreurs avec BrowserHistory et Lien.
J'ai dû inclure réagir-routeur-dom.
était une faute de frappe (en Pauls réponse originale à cette question)

fils suit:

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

paquet.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);

Passer du routeur de réaction 3.x à 4.x

Il devrait y avoir un guide de mise à niveau plus proche de la version complète. J'ai adapté le code pour la prochaine beta au lieu de l'alpha. La bêta n'est pas encore sorti, donc il n'y a malheureusement pas de version hébergée de Réagir Routeur que vous serez en mesure de tester avec.

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

0

Vous pouvez certainement, mais vous auriez besoin de réécrire certains de vos composants et de l'application de la logique parce que votre code ne sera pas exécuté comme il est actuellement.

À lire sur la documentation officielle, ici. Il y a aussi une bonne FAQ à propos de ces changements, ici. En voici un extrait:

Pourquoi l'énorme changement?

tl;dr Déclarative Composabilité.

Nous n'avons jamais été aussi excité à propos de Réagir Routeur. Comme vous, nous avons beaucoup appris sur les Réagissent depuis que nous avons ramassé. Nous avons construit un Routeur le meilleur, nous savions à quel point le long du chemin. Ce que nous avons appris le plus, c'est que nous aimons Réagir en raison de son déclarative composabilité.

Si vous souhaitez mettre à niveau, il y a un guide de mise à jour à venir, selon une source officielle:

Nous croyons très fortement itératif de la migration, pas réécrit, pour les applications. Nous travaillons actuellement sur un guide de migration, mais la stratégie de base est que les deux versions seront exécutables en tandem (en raison de la ngp limitations, nous allons publier la version précédente séparément de sorte que les deux peuvent être installés).

Vous serez en mesure de prendre des routes un par un et de les faire migrer vers la nouvelle API. En outre, la configuration de l'addon mentionnés ci-dessus peuvent aider ici.

Avec cela à l'esprit, pour en revenir à votre problème d'origine: faire de votre App composant fonctionne correctement, il devrait maintenant ressembler à quelque chose comme:
```
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} />
```
Espère que cette aide. Bonne chance.

modifier: Apparemment @PaulS a un exemple pour une future version de Réagir-Routeur v4. Si le poste est précis, le code ci-dessus ne fonctionne pas dans l'avenir; il ne fonctionne que pour la version actuelle disponible. Gardez un œil sur les pages en lien ci-dessus pour info quand RRv4 va vivre.
0

Il ya un couple de choses à noter avec la sortie récente de la version 4, à propos de votre jsfiddle. La première chose, c'est que la bibliothèque dans son ensemble a été séparé: web, natif et de base (utiliser n'importe où). L'utilisation de réagir-routeur-dom pour le web uniquement.

2: La façon dont vous imbriquez des routes est tout à fait différent. Au lieu de nidification des routes de votre composant parent, vous avez réellement ne peut pas faire, tout ce que vous avez à faire est de définir votre composant parent (BrowserRouter dans ce cas), et puis vous êtes libre de définir des routes tout au long de vos composants. Votre composants de définir la hiérarchie maintenant. Par exemple, vous pouvez organiser votre Principal et l'Application des composants comme ceci:
```
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>
)
```
Espère que cette aide. Veuillez prendre un coup d'oeil à mon fix pour votre jsfiddle ci-dessous, et laissez-moi savoir si vous avez des questions.

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

Pour plus d'informations consulter: https://reacttraining.com/react-router/web/guides/quick-start

Vous devez vous connecter pour publier un commentaire.

Pourquoi l'énorme changement?