Question

当使用react-router时，Hashbang（＃！）会被附加到url。

示例代码：

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？

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

使用redux-router从url中删除Hashbang

1 个答案: