React Router Linkはコンテンツを更新しませんが、withRouterを使用しています

Question

私はReduxでReact Router Dom 4.2.2を使用しています。私はちょうど<Link>を正しく動作させることができません。リンクを押すと、URLは変更されますが、コンテンツは更新/レンダリングされません。私はwithRouter(connect(..., ...))(Component)を使用していますが、まだ動作しません。ここで

はコンポーネントです：

class IndexPage extends React.Component { 
    constructor(props) { 
     console.log(props.location.state); 
     super(props); 

     this.state = { 
      display: (props.location.state && props.location.state.display) ? props.location.state.display : null 
     }; 
    } 

    componentDidMount() { 
     console.log("[LOADED]IndexPage"); 
     const self = this; 
    } 

    render() { 
     const self = this; 

     var displayBlock; 
     switch (this.state.display) { 
      case 'SPORT': 
       displayBlock = <SportElement/> 
       break; 
      default: 
       displayBlock = (
        <div className="container"> 
         <div className="row"> 
          <div style={ styles.xal_item_container } className="col-lg-2 col-md-3 col-sm-3 col-6"> 
           <Link style={ Object.assign({}, styles.xal_item, styles.xal_red) } to={{ 
            pathname: '/sport', 
            state: { 
             display: 'SPORT' 
            } 
           }}> 
            <div><i style={ styles.xal_icon } className="fa fa-money fa-5x"></i></div> 
            <div style={ styles.xal_title }>Sport</div> 
           </Link> 
           <Link to='/gg'>QWDWD</Link> 
          </div> 
          <div style={ styles.xal_item_container } className="col-lg-2 col-md-3 col-sm-3 col-6"> 
           <div style={ Object.assign({}, styles.xal_item, styles.xal_red) }> 
            <div><i style={ styles.xal_icon } className="fa fa-money fa-5x"></i></div> 
            <div style={ styles.xal_title }>Crawler</div> 
           </div> 
          </div> 
         </div> 
        </div> 
       ); 
     } 

     return (
      <div className="container-fluid"> 
       <div className="row"> 
        <div style={ Object.assign({}, styles.xal_topBar, styles.no_margin) } className="col"> 
         wwefwefe 
        </div> 
       </div> 
       <br/> 
       <div className="row"> 
        <div className="col"> 
         { displayBlock } 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}; 

function mapStateToProps(state) { 
    return { 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    }, dispatch); 
} 

export default withRouter(connect(mapStateToProps, matchDispatchToProps)(IndexPage)) 

そして、ここではApp.jsで<Switch>です：

import React from 'react'; 
import { Router, Redirect } from 'react-router'; 
import { browserRouter, Switch, Route } from 'react-router-dom' 

import IndexPage from 'components/Pages/IndexPage.react' 

export default class App extends React.Component { 
    render() { 
     return (
      <Switch> 
       <Route exact path="/" component={IndexPage}/> 
       <Route exact path="/sport" component={IndexPage}/> 

       <Redirect from='*' to='/' /> 
      </Switch> 
     ); 
    } 
} 

Answer 1

私は多かれ少なかれ同じ問題がありました。あなたは、BrowserRouter内のすべてをラップする必要があります：

export default class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Switch> 
        <Route exact path="/" component={IndexPage}/> 
        <Route exact path="/sport" component={IndexPage}/> 

        <Redirect from='*' to='/' /> 
       </Switch> 
      </BrowserRouter> 
     ); 
    } 
}