反应路由器 4 附加额外的查询参数答案

【问题标题】：React router 4 appending extra query param反应路由器 4 附加额外的查询参数
【发布时间】：2017-09-16 15:20:34
【问题描述】：

我的问题类似于React router appending query to URL，但我使用的是带有 Switch 和路由的反应路由器 4。在我的情况下，如何排除从历史记录中附加的额外查询参数？

  render(){
return(
  <div>
    <Header/>
    <Switch>
      <Route exact path="/" render={(props) => (<Home passDealsToRoute ={this.dealsCallBack} {...props}/>)}/>
      <Route exact path="/mall/:id/:store_id/:deal_id" render={(props) => (<MallDetail deals ={this.deals} {...props}/>)}/>
      <Route exact path="/mall/:id/:store_id" render={(props) => (<MallDetail deals ={this.deals} {...props}/>)}/>
      <Route exact path="/mall/:id" render={(props) => (<MallDetail deals ={this.deals} {...props}/>)}/>
      <Route path="/home/:location" render={(props) => (<Home passDealsToRoute ={this.dealsCallBack} {...props}/>)} />
      <Route exact path="/about" component={About}/>
    </Switch>
    <Footer/>
  </div>
);}} export default withRouter(Root);

我的索引文件

import React from 'react';


import {BrowserRouter,Route} from 'react-router-dom';
import {render} from 'react-dom';
import Root from './components/root/root';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory({queryKey: false});

class App extends React.Component {
 render() {
   return(
    <BrowserRouter history={history}>
      <Route path={"/"} component={Root}/>
    </BrowserRouter>
   );
 }
 };

 render(<App/>,window.document.getElementById('app'));

【问题讨论】：

标签： javascript reactjs react-router react-router-v4

【解决方案1】：

返回到您使用<BrowserHistory /> 的文件（我猜是index.js）并添加以下内容：

请注意，您将从“history”包而不是“react-router-dom”中获取createBrowserHistory “queryKey: false”也是这里的答案。

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

const history = createBrowserHistory({queryKey: false});
//.....

<BrowserRouter history={history}>
  // Your routes here ...
</BrowserRouter >

注意：

由于您正在利用<Switch /> 组件，因此您可以通过删除精确和反转所有路线来更好地组织您的路线。

【讨论】：

非常感谢。我已经添加了这一点，但它仍然会在每个 api 调用中传递额外的查询参数。作为 &_=1505635138301 。我已经添加了我的索引文件。
已通过添加缓存 true 修复。无论如何，您的回答对我理解反应的路由器和历史概念有很大帮助。非常感谢 :)

【解决方案2】：

实际原因不是因为反应路由器，而是通过 ajax api 调用。我通过在我的 ajax 调用中使用'cache':true 解决了这个问题。这解决了我的问题。无论如何，Abdennour 发布的答案在反应的情况下是正确的路由器。

【讨论】：