Beace Lee

Beace Blog

Written by Beace Lee who lives and works in China building useful things. You should follow him on Twitter

React HashHistory url参数问题

June 27, 2016

问题描述

在引用

import {Route,Router,hashHistory,useRouterHistory} from 'react-router'

时,浏览器的url会自动生成一个params,如同:

localhost:8080/about?_key23423

这是为了兼容低版本的浏览器不支持browserhistory的做法,但是在url中会觉得好像getpost了某个参数。 官方的解释是:

The URLs in our app right now are built on a hack: the hash. Its the default because it will always work, but there’s a better way.(better way说的是browserHistory)

解决方案:

如果要坚持使用hashHistory这种做法定义路由又不想要hash值,可以自定义history把后面的hash值去掉,做法如下:

import React from 'react'
import { render } from 'react-dom'

import {Route,Router,hashHistory,useRouterHistory} from 'react-router'

import {createHashHistory} from 'history'
import App from './modules/App'
import About from './modules/About.js'
import Repos from './modules/Repos.js'

const appHashHistory = useRouterHistory(createHashHistory)({queryKey: false});
render((
   <Router history={appHashHistory}>
        <Router path='/' component={App}>
            <Router path='/about' component={About}></Router>
            <Router path='/repos' component={Repos}></Router>
        </Router>
    </Router>
),document.getElementById('app'));

参考链接

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories