Question

我遇到了一个问题，我在哪里切换路由，而我商店中的属性值又恢复到原来的状态。我正在使用react 16与反应路由器v4。

我还注意到，当我更改路线时，整个App组件会重新渲染。这似乎超过顶部。它每次都在运行mapStateToProps和mapDispatchToProps。我注意到传入state的{{1}}也总是空的。

我很困惑。

主档

mapStateToProps

存储

import React from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
//install routing deps
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './store'

import App from './components/App';

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

应用组件

import { createStore, compose, applyMiddleware} from 'redux';
import rootReducer from './reducers/index';


const defaultState = { count: 0 };

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f,
);

const store = createStore(rootReducer, defaultState, enhancers);

//adds hot reload for changes to reducer
if(module.hot){
    module.hot.accept('./reducers', ()=>{
        const nextRootReducer = require(`./reducers/index`).default;
        store.replaceReducer(nextRootReducer);
    });
};

export default store;

Answer 1

如果你真的使用标记a，那么你就是说你愿意去另一个页面，但在反应应用程序中并非如此。作为反应，您可以从一个组件导航到另一个组件。

因此，要解决您的问题，您需要执行此操作：

import { BrowserRouter, Link, withRouter } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div>
        <Link to="/">Main</Link>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Link to="/info">Info</Link>
        <Switch>
          <Route exact path="/" render={() => <h1>kawaii world</h1>} />
          <Route exact path="/info" render={() => <h1>v kawaii world ;)</h1>} />
        </Switch>
      </div>
    );
  };
};

值是在切换视图后还原到恢复到原始状态的redux存储

1 个答案: