如何在浏览器中停止/#/与反应路由器?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

/#/在使用react-router时,有什么办法可以防止在浏览器的地址栏中显示?这是与ReactJS。即点击链接转到新路线显示localhost:3000/#/localhost:3000/#/about。取决于路线。

提问于
用户回答回答于
Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

对于当前版本0.11和转发,您需要添加Router.HistoryLocationRouter.run()<Routes>现在已被弃用。请参阅 0.12.x HistoryLocation实施的升级指南

用户回答回答于

对于react-router的版本1,2和3,将路由设置为URL映射方案的正确方法是将历史实现传递给history参数<Router>。从历史文档

简而言之,历史知道如何监听浏览器的地址栏中的更改,并将URL解析为路由器可用来匹配路由并呈现正确组件集的位置对象。

版本2和3

在react-router 2和3中,你的路由配置代码如下所示:

import { browserHistory } from 'react-router'
ReactDOM.render (( 
 <Router history={browserHistory} >
   ...
 </Router> 
), document.body);

版本1

在版本1.x中,将改为使用以下内容:

import createBrowserHistory from 'history/lib/createBrowserHistory'
ReactDOM.render (( 
  <Router history={createBrowserHistory()} >
   ...
  </Router> 
), document.body);

来源:2.0版升级指南

版本4

对于反应路由器版本4,语法已经发生了很大的变化,并且需要将其BrowserRouter用作路由器根标签。

import BrowserRouter from 'react-router/BrowserRouter'
ReactDOM.render (( 
  <BrowserRouter>
   ...
 <BrowserRouter> 
), document.body);

反应路由器版本4文档

扫码关注云+社区

领取腾讯云代金券