使用redux-router从url中删除Hashbang

Question

哈希邦(#！)在使用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是当它也有urls的时候)。

按照这里的说明进行操作：

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