withrouter react method hashrouter reactjs react-router

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

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


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