javascript - ReactJS路由器不渲染组件

Question

我已经使用路由设置了reactjs，但我的路由不起作用。当我加载页面时，它可以工作，但是当我单击链接时，URL 会发生变化，但组件不会呈现。我尝试将尽可能多的内容放入沙箱中。加载 URL/admin 并单击注销等。

https://codesandbox.io/s/o5430k7p4z

索引

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { BrowserRouter, Route, browserHistory } from 'react-router-dom';
import promise from 'redux-promise';
import { createLogger } from 'redux-logger';

import App from './App'
import reducers from './reducers';

require("babel-core/register");
require("babel-polyfill");
import 'react-quill/dist/quill.snow.css'; // ES6

const logger = createLogger();
const initialState = {};

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

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

应用程序

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom';
import ReactGA from 'react-ga';
ReactGA.initialize('UA-101927425-1');
import { connect } from 'react-redux';
import { fetchActiveUser } from './actions/index';
import { bindActionCreators } from 'redux'; 
import {getHttpRequestJSON} from './components/HTTP.js'

import Header from './components/header';
import Logout from './components/logout';
import SideBar from './components/sidebar';
import HomeContent from './containers/home';
import Ldapuser from './components/ldapuser';
import Admin from './components/admin/admin';

function fireTracking() {
    ReactGA.pageview(window.location.pathname + window.location.search);
}

class App extends Component {

    constructor(props){
        super(props);
        this.state = {
            isGuest : false,
            isSupp : false,
            loading: true,
            version: '',

        };
    }

    initData = () => {
        let self = this;

        getHttpRequestJSON('/api/user/get/user/method/is/guest/format/json?quiet=1')
        .then((response) => {
            let isGuest = response.body.recordset.record.isGuest;
            if(isGuest){
                /*$(".logo").trigger('click');
                //$("#overlay").show();
                $('#modalIntro').modal('toggle');

                $("#modalIntro").on("hidden.bs.modal", function () {
                    $(".logo").trigger('click');
                });*/
            }

            self.props.isGuest = isGuest;
            self.props.loading = false;
            //self.props.version = response.header.version;
            self.setState({
                 loading : false,
                 version : response.header.version,
                 isGuest : isGuest
            });
        })
        .catch(error => { 
            console.log("Failed!", error);
            //$('#myModalError .modal-body').html(error);
            //$('#myModalError').modal('show');
        });

        getHttpRequestJSON('/api/user/get/user/method/is/supp/format/json?quiet=1')
        .then((response) => {
            self.setState({
                isSupp : response.body.recordset.record.isSupp
            });
        })
        .catch(error => { 
            console.log("Failed!", error);
            //$('#myModalError .modal-body').html(error);
            //$('#myModalError').modal('show');
        }); 
    }

    componentDidMount() {
        this.props.fetchActiveUser();
        this.initData();
    }

    render() {
        return (
            <div>
                <Header activeUser={this.props.activeUser} loading={this.state.loading} version={this.state.version} title={`Home`} />
                <SideBar />
                <main>
                <Switch>
                   <Route path='/index.html' render={()=><HomeContent activeUser={this.props.activeUser} isGuest={this.state.isGuest} isSupp={this.state.isSupp} />} />
                   <Route path='/home' render={()=><HomeContent activeUser={this.props.activeUser} isGuest={this.state.isGuest} isSupp={this.state.isSupp} />} />       
                   <Route path='/logout' component={Logout}/>
                   <Route path='/ldapuser' component={Ldapuser}/>                  
                   <Route path='/admin' render={()=><Admin isGuest={this.state.isGuest} isSupp={this.state.isSupp}/>} />
                 </Switch>
                 </main>
             </div>
        );
    }
}

//export default App;
function mapStateToProps(state) {
    if(state.activeUser.id > 0){                  
        ReactGA.set({ userId: state.activeUser.id });
    }
    // Whatever is returned will show up as props
    // inside of the component
    return {
        activeUser: state.activeUser
    };
}

// Anything returned from this function will end up as props
// on this container
function mapDispatchToProps(dispatch){
    // Whenever getUser is called, the result should be passed
    // to all our reducers
    return bindActionCreators({ fetchActiveUser }, dispatch);
}

//Promote component to a container - it needs to know
//about this new dispatch method, fetchActiveUser. Make it available
//as a prop
export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

codesandbox 无法正常工作，但我认为您遇到的问题是使用react-redux 和react-router 时非常常见的问题。 React-Redux 的 connect HOC 有一个内置的 SCU (shouldComponentUpdate)，因此它知道重新渲染需要接收新的 props。这可以使用 React-router 的 withRouter hoc 来完成。只需将 connect(..)(MyComponent) 与 withRouter(connect(..)(MyComponent)) 包装起来，或者清理并使用 compose(例如来自 recomponse)；

const enhance = compose(
   withRouter,
   connect(mapStateToProps)
)
export default enhance(MyComponent)

请确保不要以相反的方式进行操作，因为那样行不通。