Question

我的React应用程序具有以下渲染定义

ReactDOM.render(
  <Provider store={ createStoreWithMiddleware(RootReducer) }>
    <HashRouter>
        <App />
    </HashRouter>
  </Provider>,
  document.getElementById('react')
)

所有网址都是这样的

http://localhost:8080/myApp#/dashboard
http://localhost:8080/myApp#/about

我想在#之前添加一个尾部斜杠，以便网址看起来 little 不那么难看，就像这样

http://localhost:8080/myApp/#/dashboard
http://localhost:8080/myApp/#/about

有关如何操作的任何想法？

Answer 1

您可以使用以下方法：

import {  Router } from "react-router-dom";
import {
    createBrowserHistory
} from 'history';

const history = createBrowserHistory({
    basename: '/admin/#/'
});

请注意，我使用普通的路由器并创建了浏览器历史记录。为什么？因为我用过HashRouter，它将在URL后面附加另一个＃。

此后，请确保在其他任何地方都将基本网址用作/admin/ 尤其是在Switch内用于重定向路由时

然后将此历史记录添加到路线中，如下所示：

<Router history={history} >
  <OtherComponentsOrRoutes />
</Router>

在Switch的{{1}}中，您可以这样放置重定向：

Routes

为什么？因为我们已经在createBrowserHistory中将基本网址设置为'/ admin/'。

此解决方案有效。请尝试一下。谢谢

Answer 2

我通过将以下逻辑添加到我的根级父组件构造函数中来实现此目的。该组件包含哈希路由器，因此在调用哈希路由器之前就调用了构造函数：

const history = require('myHistory');
const {HashRouter, Route, Switch} = require('react-router-dom');

...

  constructor(props) {
    super(props);
    if(document.location.pathname[document.location.pathname.length-1] !== '/') {
      // kinda hacky way to get the sexy /#/ url instead of just #/
      history.replace(document.location.pathname+'/#');
    }
  }

...和我的渲染：

render() {
    return (
      <HashRouter history={history}>
        <div>
          <Switch>
            ...
          </Switch>
        </div>
      </HashRouter>
    );
  }

使用React HashRouter

2 个答案: