Question

目前我的网址结构仍然以哈希语法存储历史记录。
例如：http://localhost:3000/#/work?_k=otstr8

我试图让它从react-router使用browserHistory显示为：
http://localhost:3000/#/work

这是我的 routes.js 文件：

//Import Dependencies.
import React from 'react';
import { Router, Route } from 'react-router'
import ReactDOM from 'react-dom';

//Import Components.
import AboutElement from '../views/about/about.jsx';
import WorkElement from '../views/work/work.jsx';
import ResumeElement from '../views/resume/resume.jsx';

//Set up routes.
let routes = (
    <Router>
        <Route path='/' component={AboutElement}/>
        <Route path='/work' component={WorkElement}/>
        <Route path='/resume' component={ResumeElement}/>
    </Router>
);

export default routes;

我的 index.js 文件：

//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';

//Import Routes.
import routes from './routes/routes.js';

ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'))

根据我的研究，这种语法对browserHistory是否正确？由于某些原因，哈希历史仍在使用中。有什么想法为什么会这样？

Answer 1

只需将历史记录安装为单独的库并使用它。

import { createHistory } from 'history'

const history = createHistory()

Answer 2

刚刚为browserHistory创建了我自己的变量。

//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

const browserHistory = createBrowserHistory();

//Import Routes.
import routes from './routes/routes.js';

ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'));

网址的语法现在是：
本地主机：3000 /
本地主机：3000 /的工作
本地主机：3000 /的恢复

哪个好极了！

BrowserHistory不适用于react-router

2 个答案: