React路由器V4更新URL但不刷新（React，Redux）

我試圖使用React-Router V4將路由添加到我的應用，但它根本無法工作。基本上，我試圖用編程方式更改history.push的路線，該路線更新瀏覽器URL，但不更改實際應用程序內的任何內容。React路由器V4更新URL但不刷新（React，Redux）

注意：我正在使用redux。

對這個問題的唯一回答的問題是：

React history.push() is updating url but not navigating to it in browser

不過，我試圖回答上述問題，它不會爲我工作。

以下是重要的片段：

最頂層文件（index.js）

... 
 
ReactDOM.render(
 
    <BrowserRouter> 
 
     <Provider store={store}> 
 
      <App/> 
 
     </Provider> 
 
    </BrowserRouter> 
 
    , document.getElementById('root')); 
 
...

含有

元器件路由

... 
 
export default function ContentRouter() { 
 
    return <div className="content"> 
 
     <Route exact path="/dashboard" component={TmpDashboard}/> 
 
     <Route exact path="/" component={() => { 
 
      return <h1>Home</h1> 
 
     }}/> 
 
    </div> 
 
}

組件推路線

... 
 
this.handleGroupClick = (group) => { 
 
    this.props.history.push(`/groups/${group}`); 
 
    this.props.onOpenChange(false); 
 
}; 
 
... 
 
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

來源

2017-06-18 AJC

下面是一個：'this.props.history.push' https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router – admcfajn

@admcfajn那是我正在嘗試的那個 – AJC

I在ContentRouter中看不到DrawerConnector。它在哪裏被使用？它嵌套在這些組件之一中嗎？我發現在我的頂層組件上使用路由器並且在其中執行是很有用的。對於他們的嵌套組件，我將歷史作爲道具傳遞。希望這是有道理的。 – Hossein

在完全錯誤的地方搜索了很多東西后，我發現什麼地方出了問題。缺少更新的原因是Redux！

每當組件被包裝在connect中時，它會導致一些時髦的事情發生，並且視圖不會更新。

的解決方案就是這裏所說的：

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

基本上，一個Route或作出反應，路由器每一件事組件內，它必須與withRouter

編輯包裹：我周圍的路增加的耦合是爲了處理路由而具有一個組件。這樣，我只需要將該組件和具有路由器的組件包裝起來。

來源

2017-06-21 03:01:34 AJC

雖然這會起作用，但它會很有侵擾性。你不應該用WithRouter來包裝每一個組件。我建議你看看我的答案是不太合適的版本。儘管如此，很高興你找到解決方案！ – Hossein

@Hossein呵呵，我試過你的解決方案，但它似乎沒有工作 – AJC

你可以使用重定向組件+狀態，重定向的反應路由器V4。

來源

2017-06-18 23:39:47 user1902193

你能詳細說明嗎？ – AJC

這裏是一個可行的設置：

主要應用：

class App extends React.Component { 

    render() { 
     return (
      <BrowserRouter> 
       <div> 
        /* this is a common component and happens to need to do redirect */ 
        <Route component={CommonComponentThatPushesToHistory} /> 
        <div id="body"> 
         /* I usually place this switch in a separate Routes file */ 
         <Switch> 
          <Route exact path="FooRoute" component={FooPage}/> 
          <Route exact path="BarRoute" component={BarPage}/> 
         </Switch> 
        </div> 
        /* another common component which does not push to history */ 
        <Footer /> 
       </div> 
      </BrowserRouter> 
     ); 
    } 
} 

export default withRouter(App);

CommonComponentThatPushesToHistory

class CommonComponentThatPushesToHistory extends React.Component{ 
    render(){ 
     return(
      <button type="button" onClick={() => {this.props.history.push('some-page');}}>Click to get redirected</button> 
     ); 
    } 
}

FooPage可能是推動歷史子組件：

class FooPage extends React.Component{ 
    render(){ 
     return(
      <MyChild history={this.props.history} /> 
     ); 
    } 
}

然後，MyChild組件可以按照與CommonComponentThatPushesToHistory相同的方式推送到歷史記錄。

來源

2017-06-21 01:39:41 Hossein

React路由器V4更新URL但不刷新（React，Redux）

回答

相關問題