当使用 react-redux v5 设置 React v15.5 时,路由不导航

IT技术 javascript reactjs react-router react-redux react-router-redux
2021-05-24 16:24:47

我是 React 的新手,我已经使用 Facebook 的create-react-app设置了我的 React 项目以下是核心文件:

索引.js

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import { createStore, applyMiddleware } from "redux";
import { Provider } from 'react-redux'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './containers/App';
import Routes from "./Routes";

const browserHistory = createHistory();
middleware = routerMiddleware(browserHistory);
const store = createStore(reducers, applyMiddleware(middleware, thunk))
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <App />
    </Router>
  </Provider>, document.getElementById('root')
);

路由.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router';

import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';

class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={ Home } />
            <Route path="/about" component={ About } />
            <Route path="/contact" component={ Contact } />
      </Switch>
    );
  }
}

export default Routes;

应用程序.js

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import Routes from "../Routes";
import SideNav from '../presentation/SideNav';

class App extends Component {
    render() {
        return (
            <div>
              <Link to='/'>Home</Link>
              <Link to='/about'>about</Link>
              <Link to='/contact'>contact</Link>
              <SideNav />
               <Routes />
            </div>
        );
    }
}

export default App;

我在这里面临的问题是,当我加载具有特定路由的页面时,该组件正在浏览器上呈现。但是,如果我使用“链接”导航到不同的路线,请说

<Link to='/contact'>contact</Link>

在这种情况下,/contact 组件未加载,但路由正在更改并反映在浏览器中。

我寻找解决方案,但主要使用折旧的代码,即使在react-router-redux 中,示例包含不在更新包中的ConnectedRouter

正在使用这些依赖项

我不知道我是否在代码中犯了一些愚蠢的错误或遗漏了什么。

提前致谢。:)

1个回答

解决方案在这里

import { withRouter } from 'react-router-dom'

// before
export default connect(mapStateToProps)(Something)

// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

通常,React Router 和 Redux 一起工作得很好。但有时,应用程序的组件可能会在位置更改时不更新(子路由或活动导航链接不更新)。

如果出现这种情况:

  • 该组件通过 connect()(Comp) 连接到 redux。
  • 该组件不是“路由组件”,这意味着它不会像这样呈现: <Route component={SomeConnectedThing}/>

问题是 Redux 实现了 shouldComponentUpdate 并且如果它没有从路由器接收props,则没有任何迹象表明任何事情发生了变化。这很容易解决。找到连接组件的位置并将其包装在 withRouter 中。