使用 redux-router 从 url 中删除 Hashbang

Question

Hashbang(#!) 在使用 react-router 时被附加到 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);

如何从 URL 中删除 Hashbang？

Answer 1

我假设你想一起摆脱散列网址（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)

我建议确保说明正确，将 react-router 更新为 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')
)