hashHistory vs context.router

Question

Was ist der Unterschied zwischen hashHistory und context.router? Beide routen URL und scheinen genauso zu arbeiten.

Answer 1

hashHistory ist eine Instanz eines history Objekts, das vom Modul history erstellt wurde. Es funktioniert, indem der Hash einer URL geändert wird.

Im React Router muss ein <Router> ein history Objekt übergeben werden. Sie können ein eigenes Objekt erstellen und konfigurieren, aber zur Vereinfachung erstellen Sie auch hashHistory und browserHistory Objekte für Sie. Diese Objekte können überall in Ihrem Projekt importiert und verwendet werden, auch innerhalb Ihrer Komponenten. Der Nachteil besteht darin, dass Sie sie nicht selbst konfigurieren können. Wenn Sie eine der Verlaufskonfigurationsoptionen verwenden müssen, müssen Sie ein eigenes history-Objekt erstellen.

import { hashHistory, Router } from 'react-router' 

render((
    <Router history={hashHistory}>...</Router> 
), holder) 

// or 

import { Router } from 'react-router' 
import { createHashHistory } from 'history' 

const history = createHashHistory({ /* configuration options */ }) 
render((
    <Router history={history}>...</Router> 
), holder) 

Innerhalb der gerenderten Komponenten durch die <Router>, können Sie das context.router Objekt zugreifen. Dazu gehören eine Reihe von Methoden aus Ihrem Objekt history. Diese Methoden zu calden ist dasselbe wie das Importieren von hashHistory in diese Datei und das Aufrufen der von Ihnen benötigten Navigationsfunktion.

const MyComponent = (props, context) => (
    <div onClick={() => { context.router.push('/other-page') }}>Click Me!</div> 
) 

const MyComponent = (props) => (
    <div onClick={() => { hashHistory.push('/other-page') }}>Click Me!</div> 
) 

Der Nachteil davon ist, dass Ihre Komponenten weniger tragbar sind. Während die Verwendung von context.router das history Objekt verwendet, das Sie an die <Router> übergeben haben, müssten Sie die Komponente ändern, wenn Sie sich entschieden haben, von hashHistory zu browserHistory zu wechseln.