La configuration de l'application basename dans réagissent-routeur

Je suis un peu en difficulté avec réagissent-routeur 2.la configuration de x, plus précisément application basename.

J'ai une application qui peut avoir différentes de la base de la racine tout au long de son cycle de vie. Par exemple:

/ dans le développement
/users dans la production
/account de la production après la migration

Le nom de base entre en jeu à plusieurs endroits:

statique de l'actif de la compilation dans Webpack
réagir-routeur principal de configuration
la spécification de rediriger les routes dans redux actions
fournir quelque chose comme redirectUrl aux appels d'API

Ma solution actuelle est d'avoir un ENV variable et de le rendre accessible à la fois à Webpack et à l'application elle-même par l'injection de window.defs via un server Express, mais j'ai quand même avoir des choses comme ${defs.APP_BASENAME}/signin dans beaucoup trop d'endroits tout au long de l'application.

Comment puis-je résumé l'application de la base, ou au moins de le ranger dans un seul endroit? Je devrais être capable de spécifier la base de l'itinéraire dans la config du Routeur, et puis il suffit d'utiliser par rapport routes en quelque sorte, non? Ou ai-je raté quelque chose?

InformationsquelleAutor Ilya Ayzenshtok | 2017-01-03

react-router react-router-redux

4

Vous pouvez décorer votre history avec un basename. Vous pouvez mélanger avec un DefinePlugin dans votre Webpack de configuration pour spécifier le nom de base doit être utilisé.
```
//webpack.config.js
new Webpack.DefinePlugin({
  BASENAME: '/users'
})

//somewhere in your application
import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: BASENAME
})
```
Donné le nom de base: /users, Réagir Routeur ignore la /users au début du chemin, donc:
1. L'URL /users est à l'intérieur compensée par le chemin /
2. L'URL /users/profile correspond au chemin d'accès /profile.
De la même façon, vous n'avez pas à ajouter le nom de base pour le chemin d'accès lors de votre navigation au sein de votre application.
1. <Link to='/friends'>Friends</Link> permettra d'accéder à /friends en interne, mais l'URL dans la barre d'adresse sera /users/friends.
- Cela fonctionne encore avec réagissent-routeur et de l'histoire de la v3.
InformationsquelleAutor Paul S
3

Aujourd'hui je suis tombé sur le même problème:
Sur mon localhost, je laisse un NGINX servir les choses dans le contexte de la racine, mais sur mon serveur de prod, un Apache sert les choses à partir d'un sous-répertoire...

Inspiré par la réponse de Paul S et inspiré par les infos ici:
https://github.com/ReactTraining/react-router/issues/353

Je suis la pour m'solution de travail:

Dans le Webpack fichier de config j'ai défini un plugin pour mon localhost dev env:
```
  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/")
    })
  ],
```
Dans le Webpack PROD fichier de config j'ai défini un plugin pour mon prod env dans un sous-dossier, c'est à dire http://www.example.com/users:
```
  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/users/")
    }),
```
Et dans mon réagir-routeur définitions je viens de référence:
```
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
...
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>
```
Pour moi un très élégant et de solution trop facile. Il vient de me coûter autour de cinq heures de recherche autour de vous 🙂

InformationsquelleAutor davey

Vous devez vous connecter pour publier un commentaire.