Redux不适用于React路由器

Question

I'm using the following:

react v16.2.0, react-redux v5.0.7, react-router-dom v4.2.2, redux v3.7.2

What I am trying to achieve is to update some props from the Auth component, and when the user navigates to /user (Which loads the Userpage component), the modified props should be displayed. Here is a simplified version of my code:

In App.js:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Store from './components/Store';
import Home from './components/Home';
import Auth from './components/auth';
import Userpage from './components/Userpage';
import { BrowserRouter as Router, Route } from 'react-router-dom';

class App extends Component {

  render() {
    return (  
      <Provider store={Store}>    
        <Router>
          <div>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Auth}/>
            <Route path="/user" component={Userpage}/>
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

In Store.js:

import { createStore } from 'redux';

const reducer = (state,action) => {
    if(action.type == 'TEST'){
        return Object.assign({},state,{test:action.payload.test});
    } else    
        return state;
}

export default createStore(reducer,{
    test:'DOES NOT WORK',
})

In Auth.js :

import React from 'react';
import { connect } from 'react-redux';
import Userpage from './Userpage';


class Auth extends React.Component {

    componentWillMount() {
        this.props.update('TEST',{test:'WORKS'});
    }

    render() {
        return(
            <div>
                <Userpage/>
            </div>
        );
    }
}

export default connect(
    (store) => {
        return store;
    },
    (dispatch) => {
        return {
            update:(dispatchType, dispatchPayload) => {
                dispatch({type:dispatchType,payload:dispatchPayload});
            }
        }
    }
)(Auth);

In Userpage.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Userpage extends Component{
    componentDidMount(){
        console.log(this.props.test);
    }

    render(){
            return null;
    }
}

export default connect(
    (store) => {
        return store;
    }
)(Userpage);

Now, when I navigate to /login, the store is updated and test is set to "WORKS". But if I navigate to /userpage, console.log(this.props.test) prints "DOES NOT WORK", instead of the updated prop.

Just to test, I included Userpage in the render function of Auth and it console logs "WORKS" correctly.

So why is the redux store apparently being reset to default values on navigation to another page using react-router? How can I fix this?

Answer 1

Found the solution. Apparently the whole application re-renders when you manually navigate (by typing in the URL in the browser), hence resetting the redux store.

Using Link as mentioned in react-router docs or redirecting using this.props.history.push('/user') works without any issues.