web-dev-qa-db-fra.com

Comment enlever le hash de l'URL dans react-router

J'utilise react-router pour mon routage et l'option hashHistory afin d'actualiser la page à partir du navigateur ou de spécifier l'URL de l'un de mes itinéraires existants et d'atterrir sur la bonne page . Je vois le hachage dans l'URL comme ceci: http: // localhost/#/login? _K = ya6z6i

Voici ma configuration de routage:

ReactDOM.render((
 <Router history={hashHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));
reactjsreact-router
19
Dennis Nerush

Avez-vous essayé l'option browserHistory? Vous pourrez également actualiser la page à partir du navigateur ou spécifier une URL d'un des itinéraires existants et atterrir sur la bonne page.

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render((
 <Router history={browserHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

De plus, hashHistory n’est pas destiné à la production compte tenu du doc ​​de reath-github. 

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

Dois-je utiliser hashHistory?

L'historique de hachage fonctionne sans configurer votre serveur, donc si vous êtes juste pour commencer, allez-y et utilisez-le. Mais, nous ne recommandons pas l’utiliser en production, chaque application Web doit aspirer à utiliser browserHistory

20
Aaleks

Vous devrez importer browserHistory à partir de react-router 
et le transmettre au <Router /> afin de supprimer le hachage de l'URL

Ex:

import { browserHistory } from 'react-router';

<Router history={browserHistory}>
 //Place your route here
</Router>
2
Umair Ahmed

Essaye ça:

// v1.x
import createBrowserHistory from 'history/lib/createBrowserHistory'
<Router history={createBrowserHistory()} />

// v2.0.0
import { browserHistory } from 'react-router'
<Router history={browserHistory} />


const history = createHashHistory({ queryKey: false });
<Router history={history}>
</Router>

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

https: //github.com/reactjs/react-router/blob/8ef625e8fa7c41dda0f3d1d68a10b74bd93a4101/docs/guides/ba ...

0
Albert Olivé

je suis nouveau pour réagir mais j'ai utilisé BrowserRouter et cela fonctionne très bien: - 

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter, Route, Switch } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter >
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route to={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);
0
Eassa Nassar