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

React Router Link不刷新内容，但我使用withRouter

1 个答案: