React路由器鏈路不刷新內容，但我用路由器

我使用React路由器Dom 4.2.2與Redux和我只是不能使<Link>正常工作。當鏈接被按下時，URL被改變但內容不被刷新/呈現。我正在使用withRouter(connect(..., ...))(Component)，但仍然無法正常工作。React路由器鏈路不刷新內容，但我用路由器

這裏的組件：

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> 
     ); 
    } 
}

來源

2017-09-11 Mihai

您需要將應用程序組件放在單個路由器組件中。 – Abhishek

對不起，您需要將您的應用程序組件包裝在WithRouter中而不是索引頁中。請忽略以上評論 – Abhishek

'export default withRouter（App）;'不起作用 – Mihai

我或多或少相同的問題。您需要將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> 
     ); 
    } 
}

來源

2017-09-11 13:24:07

React路由器鏈路不刷新內容，但我用路由器

回答

相關問題