如何使用 react-router-dom 和 react-router-bootstrap 避免 URL 中的哈希符号？答案

【问题标题】：How to avoid hash sign in URL, using react-router-dom and react-router-bootstrap?如何使用 react-router-dom 和 react-router-bootstrap 避免 URL 中的哈希符号？
【发布时间】：2021-05-12 22:13:29
【问题描述】：

我使用来自react-router-dom 的<Route /> 进行路由，使用来自react-bootstrap + react-router-bootstrap 的Nav + LinkContainer 进行导航：

//...
  <Route path="/shop/" component={Shop} />
//...
  <NavItem caption="Home" path="/" />
  <NavItem caption="Shop" path="/shop" />
//...
    
// with a helper component: 
const NavItem = (props) => {
  return (
    <LinkContainer to={props.path} > 
      <Nav.Link> {props.caption} </Nav.Link> 
    </LinkContainer>
  )
}

这会创建一个带有井号的 URL，例如：

http://localhost:3000/#/shop

这是从哪里来的，有什么用？无论如何，一切都很好，但我认为这个井号并不聪明。我可以避免吗？

【问题讨论】：

反应路由器4？
我的版本是5.2

标签： reactjs react-router-dom react-bootstrap react-router-bootstrap

【解决方案1】：

你可以使用

浏览器路由器

代替

哈希路由器

这会阻止在 URL 上显示 #。

import {
  BrowserRouter as Router,
  ...
}

instead of

import {
  HashRouter as Router,
  ...
}

【讨论】：

是啊，工作，非常感谢！你能告诉我，HashRouter 和 BrowserRouter 是关于什么的吗？
当我们使用任何后端框架模板加载react构建文件时使用哈希路由器，当我们单独托管后端和前端时使用浏览器路由器。