Удалите Hashbang с URL-адреса с помощью redux-router

Question

Hashbang (#!) Присоединяется к URL-адресу при использовании маршрутизатора-ответчика.

Исключить: http://localhost:3000/#!/?

Пример кода:

import React from 'react'; 
import { combineReducers, applyMiddleware, compose, createStore } from 'redux'; 
import { reduxReactRouter, routerStateReducer, ReduxRouter } from 'redux-router'; 
import { createHistory } from 'history'; 
import { Route } from 'react-router'; 

const routes = (
    <Route path="/" component={App}> 
    <Route path="parent" component={Parent}> 
    <Route path="child" component={Child} /> 
    <Route path="child/:id" component={Child} /> 
    </Route>); 

    const reducer = combineReducers({ 
    router: routerStateReducer, 
    }); 

    const store = compose(
    applyMiddleware(m1, m2, m3), 
    reduxReactRouter({ 
    routes, 
    createHistory 
    }), 
    devTools() 
    )(createStore)(reducer); 

Как удалить Hashbang из URL?

Answer 1

Я предполагаю, что вы хотите избавиться от хеш-ссылок вместе (hashbang - это когда он имеет !).

Следуйте инструкции:

https://github.com/rackt/react-router/blob/latest/docs/guides/basics/Histories.md#browserhistory

Они показывают вам пример, используя экспресс (хотя это возможно с почти любым сервером):

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 8080 
const app = express() 

// serve static assets normally 
app.use(express.static(__dirname + '/public')) 

// handle every other route with index.html, which will contain 
// a script tag to your application's JavaScript file(s). 
app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
}) 

app.listen(port) 
console.log("server started on port " + port) 

Я рекомендую, чтобы гарантировать, что инструкции исправить, обновить реакцию-маршрутизатор до 2.0.0-rc4, хотя с первого взгляда похоже, что эта часть руководства по-прежнему применяется без изменений.

Суть в том, что сервер сначала запрашивает реальные физические файлы, затем любые оставшиеся запросы GET отправляются на адрес index.html.

Существует более продвинутый подход к этому для server-side rendering, где запросы передаются через маршрутизатор, но пока я проигнорирую это.

Тогда на клиенте вы должны использовать browserHistory:

import React from 'react' 
import { render } from 'react-dom' 
import { browserHistory, Router, Route, IndexRoute } from 'react-router' 

import App from '../components/App' 
import Home from '../components/Home' 
import About from '../components/About' 
import Features from '../components/Features' 

render(
    <Router history={browserHistory}> 
    <Route path='/' component={App}> 
     <IndexRoute component={Home} /> 
     <Route path='about' component={About} /> 
     <Route path='features' component={Features} /> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
)