Удалите Hashbang из URL, используя redux-роутер

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

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

Следуйте инструкциям здесь:

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

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

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,

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

Тогда на клиенте вы должны использовать 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')
)