reactjs - method - Cómo eliminar el hash de la url en react-router
react router render method (4)
¿Probaste la opción de browserHistory? También podrá actualizar la página desde el navegador o especificar una URL de una de las rutas existentes y aterrizar en la página de la derecha.
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''));
Además, hashHistory no es para uso en producción considerando el github doc del enrutador de reacción.
https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory
¿Debo usar hashHistory?
El historial de hash funciona sin configurar su servidor, por lo que si recién está comenzando, adelante y úselo. Pero, no recomendamos su uso en producción, todas las aplicaciones web deben aspirar a usar browserHistory
Estoy usando react-router para mi enrutamiento y uso la opción hashHistory para poder actualizar la página desde el navegador o especificar una URL de una de mis rutas existentes y aterrizar en la página derecha. Funciona bien, pero veo el hash en la url así: http://localhost/#/login?_k=ya6z6i
Esta es mi configuración de enrutamiento:
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''));
Necesitará importar la browserHistory
del browserHistory
desde react-router
de react-router
y páselo al <Router />
para eliminar el hash de la URL
Ex:
import { browserHistory } from ''react-router'';
<Router history={browserHistory}>
//Place your route here
</Router>
Prueba esto:
// 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
Soy nuevo en reaccionar pero he usado BrowserRouter y funciona 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")
);