如何使用历史记录中的 createHashHistory 从 url 中删除 #

Question

我找到 http://localhost:3000/#/admin 但我想在反应 16.8 中使用历史记录中的 createHashHistory 从 url 中删除 #

 import createHashHistory from 'history/createHashHistory';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import createSagaMiddleware from 'redux-saga';


import reducers from './redux/reducers';
import sagas from './redux/sagas';

 const trackingId = 'UA-111111-1'; // Replace with your Google Analytics tracking ID
 ReactGA.initialize(trackingId, {
  debug: true,
 });
// middlewared
const history = createHashHistory({ queryKey: false })

const sagaMiddleware = createSagaMiddleware();
const routeMiddleware = routerMiddleware(history);
const middlewares = [sagaMiddleware, routeMiddleware];

const store = createStore(reducers(history), compose(applyMiddleware(...middlewares)));
sagaMiddleware.run(sagas);

history.listen(location => {
  console.log(location, 'location');
});

Answer 1

以下示例不会将 # 添加到您的路径中，并且还提供您的历史推送功能。 hashHistory/ createHashHistory 不推荐用于生产。 您是否尝试过其他最佳选择，例如 BrowserRouter、浏览器历史记录。 他们似乎解决了你的问题。

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import reducers from "./reducers"
import { BrowserRouter, Route } from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Route path="/" exact component={Home} />
                <Route path="/Screen1" exact component={ComponentForScreen1} />
                <Route path="/Screen2" exact component={ComponentForScreen2} />
                <Route path="/Screen3" exact component = {ComponentForScreen3}/>
            </BrowserRouter>
        );
    }
}

ReactDOM.render(
    <Provider store={createStore(reducers, compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    ))}>
        <App />
    </Provider>, document.querySelector("#root"));

上面是带有Route路径的BrowserRouter。还有 browserHistory 选项。

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render((
 <Router history={browserHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Login} />
      <Route path='/page1' component={page1component} />
      <Route path='/page2' component={page2component} />
      <Route path='/page3' component={page3component} />
    </Route>
  </Router>),
    document.getElementById('app-container'));