Puis-je définir une gamme de base de réagir-routeur

En supposant que mon application de l'url de base est example.com/app

Est-il possible de définir une route à réagir-routeur, donc au lieu d'écrire toutes les routes que

/app/a
/app/b
/app/c

Je peux juste préciser que 

a
b
c

J'ai essayé l'exemple ci-dessous j'ai trouvé dans le docs mais il ne fonctionne pas (page affiche rien). C'est peut-être parce que je suis en utilisant [email protected] ou je fais quelque chose de mal. 

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/app'
})

const Root = ({store}) => (
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={App}>
                ...
            </Route>
        </Router>
    </Provider>
)
  • Avez-vous résolu le problème? Merci de poster une réponse si la réponse est oui.
  • nope. J'ai abandonné et commencé à taper des routes, et, en fait, trouvé à être plus propre.
  • Vraiment? Il n'y a pas de solution facile pour cela? J'ai cherché et essayé quelques idées sans un peu de chance (mais je suis un newbie).
InformationsquelleAutor galki | 2016-07-05
  1. 70

    Avec le nouveau réagir routeur (v4) vous pouvez facilement le faire

    <BrowserRouter basename="/calendar"/>
<Link to="/today"/> //renders <a href="/calendar/today">
    • Est-il de toute façon pour ce faire avec la dynamique chemin des champs? Comme /calendar/:year/:month/:day/event où il pourrait être, par exemple, /calendar/11/4/21/event
    • pourquoi ne pas mettre le :year/:month/:day/event partie dans le Lien de=?
    InformationsquelleAutor galki
  2. 1

    Si vous souhaitez utiliser <Router />, qui vous donnent accès à l'histoire de l'objet, vous permettant de modifier la page par le biais de history.push('/my-path') méthode directement à partir de js. Vous serez face à la question que BrowserRouter n'a pas history prop disponibles, et le Routeur n'a pas basename disponibles.

    La solution est la suivante:

    const App: React.FC = () => {
  //do not put a slash at the end of the basename value.
  const history = createBrowserHistory({ basename: '/your-base-name' });

  return <Router history={history}>
           ...
         </Router>;
}

    L'URL de base pour tous les emplacements. Si votre application est servi à partir d'un sous-répertoire sur votre serveur, vous aurez envie de la mettre à la sous-répertoire. Un correctement formaté basename devrait avoir un slash, mais pas de barre oblique de fin

    https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

    InformationsquelleAutor Ambroise Rabier