Jak usunąć skrót z adresu URL w routerze reagowania

Question

Używam routera reagowania do mojego routingu i używam opcji hashHistory, dzięki czemu mogę odświeżyć stronę z przeglądarki lub podać adres URL jednego z moich istniejących trasy i lądowanie na właściwej stronie. To działa dobrze, ale widzę hash w url tak: http://localhost/#/login?_k=ya6z6i

To jest moja konfiguracja routingu:

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

Answer 1

Próbowałaś opcję browserHistory? Będziesz mógł również odświeżyć stronę z przeglądarki lub podać adres URL jednej z istniejących tras i wylądować na właściwej stronie.

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

Ponadto hashHistory nie jest do użytku produkcyjnego, biorąc pod uwagę github doc routera reagowania.

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

powinienem używać hashHistory?

historia Hash działa bez konfigurowania serwera, więc jeśli jesteś po prostu podręczny, iść do przodu i używać go. Ale, nie zalecamy używania w produkcji, każda aplikacja internetowa powinna dążyć do wykorzystania browserHistory

Answer 2

Spróbuj tego:

// 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...

Answer 3

Musisz również importować browserHistory z react-router
i pas s go do <Router /> w celu usunięcia skrótu z adresu URL

Ex:

import { browserHistory } from 'react-router'; 

<Router history={browserHistory}> 
//Place your route here 
</Router>