如何为React HashRouter的URL在#前添加尾部斜杠

嘿，这个小需求很好搞定！你只需要给HashRouter组件加个basename属性，就能让URL在#前自动补上尾部斜杠啦。

修改前的代码 #

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

修改后的代码 #

ReactDOM.render( 
  <Provider store={ createStoreWithMiddleware(RootReducer) }> 
    {/* 添加basename属性，指定带尾部斜杠的基础路径 */}
    <HashRouter basename="/myApp/"> 
      <App /> 
    </HashRouter> 
  </Provider>, 
  document.getElementById('react') 
)

原理说明 #

basename是HashRouter的内置属性，用来指定路由的基础URL前缀。当你设置basename="/myApp/"时，它会自动处理路径的分隔逻辑，确保基础路径和哈希路由部分之间有一个规范的斜杠分隔，最终生成的URL就会变成你想要的格式：

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

这个设置还很灵活，如果后续应用的部署路径有变化，只需要调整basename的值就行，不用改动其他路由配置~

内容的提问来源于stack exchange，提问作者Clay Banks