reactjs - redireccionar - redirect react router v4

¿Cómo parar/#/en el navegador con react-router?

Question

¿Hay alguna manera de evitar que /#/ muestre en la barra de dirección del navegador cuando se usa reaccionar-enrutador? Eso es con ReactJS. es decir, hacer clic en los enlaces para ir a una nueva ruta muestra localhost:3000/#/ o localhost:3000/#/about . Dependiendo de la ruta.

Answer 1

En realidad puedes usar .htaccess para lograr esto. El navegador normalmente necesita el delimitador de cadena de consulta ? o # para determinar dónde comienza la cadena de consulta y finalizan las rutas de directorio. El resultado final que queremos es www.mysite.com/dir Entonces, debemos detectar el problema antes de que el servidor web busque el directorio que cree que solicitamos /dir . Entonces colocamos un archivo .htaccess en la raíz del proyecto.

 # Setting up apache options
AddDefaultCharset utf-8
Options +FollowSymlinks -MultiViews -Indexes
RewriteEngine on
# Setting up apache options (Godaddy specific)
#DirectoryIndex index.php
#RewriteBase /
# Defining the rewrite rules
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^.*$ ./index.html

A continuación, obtiene los parámetros de consulta con window.location.pathname

A continuación, puede evitar el uso de rutas de reacción si lo desea y simplemente manipular la url y el historial del navegador si así lo desea. Espero que esto ayude a alguien...

Answer 2

Instala el paquete de historial

npm install history --save

A continuación, importe createHistory y useBasename del historial

import { createHistory, useBasename } from ''history'';
...
const history = useBasename(createHistory)({
basename: ''/root''
});

si la URL de su aplicación es www.example.com/myApp, entonces / root debe ser / myApp.

pasar la variable de historial al enrutador

render((
<Router history={history}>
...
</Router>
), document.getElementById(''example''));

Ahora, para todas sus etiquetas de enlace, agregue un "/" al frente de todas las rutas.

<Link to="/somewhere">somewhere</Link>

La inspiración de la solución provino del ejemplo de React-Router, que lamentablemente no estaba debidamente documentado en su API.

Answer 3

Otra forma de manejar lo que se muestra después del hash (¡de modo que si no usa pushState!) Es crear su CustomLocation y cargarlo en la creación de ReactRouter.

Por ejemplo, si desea tener la URL hashbang (por lo tanto, con #!) Para cumplir con las especificaciones de google para rastrear, puede crear un archivo HashbangLocation.js que copie principalmente la ubicación HashLocation original, como:

''use strict'';
var LocationActions = require(''../../node_modules/react-router/lib/actions/LocationActions'');
var History = require(''../../node_modules/react-router/lib/History'');
var _listeners = [];
var _isListening = false;
var _actionType;
function notifyChange(type) {
if (type === LocationActions.PUSH) History.length += 1;
var change = {
path: HashbangLocation.getCurrentPath(),
type: type
};
_listeners.forEach(function (listener) {
listener.call(HashbangLocation, change);
});
}
function slashToHashbang(path) {
return "!" + path.replace(/^///, '''');
}
function ensureSlash() {
var path = HashbangLocation.getCurrentPath();
if (path.charAt(0) === ''/'') {
return true;
}HashbangLocation.replace(''/'' + path);
return false;
}
function onHashChange() {
if (ensureSlash()) {
// If we don''t have an _actionType then all we know is the hash
// changed. It was probably caused by the user clicking the Back
// button, but may have also been the Forward button or manual
// manipulation. So just guess ''pop''.
var curActionType = _actionType;
_actionType = null;
notifyChange(curActionType || LocationActions.POP);
}
}
/**
* A Location that uses `window.location.hash`.
*/
var HashbangLocation = {
addChangeListener: function addChangeListener(listener) {
_listeners.push(listener);
// Do this BEFORE listening for hashchange.
ensureSlash();
if (!_isListening) {
if (window.addEventListener) {
window.addEventListener(''hashchange'', onHashChange, false);
} else {
window.attachEvent(''onhashchange'', onHashChange);
}
_isListening = true;
}
},
removeChangeListener: function removeChangeListener(listener) {
_listeners = _listeners.filter(function (l) {
return l !== listener;
});
if (_listeners.length === 0) {
if (window.removeEventListener) {
window.removeEventListener(''hashchange'', onHashChange, false);
} else {
window.removeEvent(''onhashchange'', onHashChange);
}
_isListening = false;
}
},
push: function push(path) {
_actionType = LocationActions.PUSH;
window.location.hash = slashToHashbang(path);
},
replace: function replace(path) {
_actionType = LocationActions.REPLACE;
window.location.replace(window.location.pathname + window.location.search + ''#'' + slashToHashbang(path));
},
pop: function pop() {
_actionType = LocationActions.POP;
History.back();
},
getCurrentPath: function getCurrentPath() {
return decodeURI(
// We can''t use window.location.hash here because it''s not
// consistent across browsers - Firefox will pre-decode it!
"/" + (window.location.href.split(''#!'')[1] || ''''));
},
toString: function toString() {
return ''<HashbangLocation>'';
}
};
module.exports = HashbangLocation;

Tenga en cuenta la función slashToHashbang .

Entonces solo tienes que hacer

ReactRouter.create({location: HashbangLocation})

Y eso es :-)

Answer 4

Para las versiones 1, 2 y 3 de reaccionar-enrutador, la forma correcta de establecer la ruta al esquema de asignación de URL es pasando una implementación de historial en el parámetro de history de <Router> . De la documentación de historias :

En pocas palabras, un historial sabe cómo escuchar la barra de direcciones del navegador en busca de cambios y analiza la URL en un objeto de ubicación que el enrutador puede usar para hacer coincidir las rutas y representar el conjunto correcto de componentes.

Versiones 2 y 3

En react-router 2 y 3, su código de configuración de ruta tendrá el siguiente aspecto:

import { browserHistory } from ''react-router''
ReactDOM.render ((
<Router history={browserHistory} >
...
</Router>
), document.body);

Versión 1

En la versión 1.x, en su lugar usarás lo siguiente:

import createBrowserHistory from ''history/lib/createBrowserHistory''
ReactDOM.render ((
<Router history={createBrowserHistory()} >
...
</Router>
), document.body);

Fuente: Guía de actualización de la versión 2.0

Versión 4

Para la próxima versión 4 de reaccionar-enrutador, la sintaxis ha cambiado mucho y se requiere utilizar BrowserRouter como la etiqueta raíz del enrutador.

import BrowserRouter from ''react-router/BrowserRouter''
ReactDOM.render ((
<BrowserRouter>
...
<BrowserRouter>
), document.body);

Source React Router Version 4 Docs

Answer 5

Si no necesita admitir IE8, puede usar el historial del navegador y react-router usará window.pushState lugar de establecer el hash.

Cómo hacer esto exactamente depende de la versión de React Router que esté utilizando:

• v4: https://reacttraining.com/react-router/web/api/BrowserRouter
• v3: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md
• v2: https://github.com/ReactTraining/react-router/blob/v2.0.0/docs/guides/Histories.md
• v1: https://github.com/ReactTraining/react-router/blob/1.0.x/docs/guides/basics/Histories.md

Answer 6

Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});

Para la versión actual 0.11 y reenviar, debe agregar Router.HistoryLocation a Router.run() . <Routes> ahora están en desuso. Consulte la Guía de actualización para la implementación de 0.12.x HistoryLocation.