Estoy usando reaccionar-router para mi enrutamiento y yo uso el hashHistory opción para que yo pudiera actualizar la página desde el navegador o especificar una dirección url de una de mis rutas existentes y la tierra en el derecho de la página.
Funciona bien, pero veo que el hash de la url como esta:
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'));

4 Comentarios

  1. 25

    Intenta la browserHistory opción ? Usted será capaz también para actualizar la página desde el navegador o especificar una dirección url de una de las rutas existentes y la tierra en el derecho de la página.

    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, teniendo en cuenta el reaccionar-router github doc.

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

    Debo usar hashHistory?

    Hash de la historia de las obras sin la configuración del servidor, así que si estás solo
    introducción, seguir adelante y utilizar. Pero, no se recomienda su uso
    en la producción, cada aplicación web debe aspirar a utilizar browserHistory

    • lo he probado y el hash desaparecido. Sin embargo, yo no puede aterrizar en la misma página después de la actualización del navegador
    • ¿Utiliza un servidor (node.js) para servir a sus archivos ?
    • ASP.NET Web API
    • Debería funcionar si la primera vez que se hace una solicitud para el servidor que vamos a decir en mysite.com servir a un index.html archivo cuando se haga clic en un botón que invocar el router mysite.com/page1 se mostrará la página mediante el uso de reaccionar router en el lado del cliente. Pero cuando se actualice pedir al servidor de la URL mysite.com/page1 pero si va a servir para cada solicitud de la index.html archivo con un patrón como * en cada pedido que sirven index.html usted debe ver el contenido correcto, porque mysite.com/page1 -> dar index.html pero el reaccionar router ver /page1 y hacer el trabajo como usted hace clic de nuevo en página1 botón.
    • browserHistory necesidad de procesamiento del lado del servidor. así que yo uso hashHistory en la producción, debido a que no tengo servidor de procesamiento del lado en mi proyecto.
    • Si desea utilizar react-router-dom con history, uso: import createHistory from 'history/createBrowserHistory';

  2. 5

    soy nuevo en reaccionar pero he utilizado 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")
    );
  3. 3

    Usted necesita importar browserHistory de react-router

    y se pasa a la <Router /> con el fin de eliminar el hash de la URL

    Ex:

    import { browserHistory } from 'react-router';
    
    <Router history={browserHistory}>
     //Place your route here
    </Router>
  4. 0

    Intente 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

    • han supongo que por eso tengo este error incluso sin el uso de reaccionar-router? sólo reaccionar y reaccionar-dom
    • 3.x? You have provided a history object created with history v2.x or earlier. This version of React Router is only compatible with v3 history objects. Please upgrade to history v3.x.
    • ok solucionado con este import { createHistory } from 'history'; // you need to install this package let history = createHistory();

Dejar respuesta

Please enter your comment!
Please enter your name here