React Router Link가 컨텐츠를 새로 고치지 않지만 withRouter를 사용 중입니다.

Question

Redux에서 4.2.2이라는 리퀘스트 라우터 Dom을 사용 중이므로 <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> 
     ); 
    } 
}