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

Posted 2023-02-21

【中文标题】当使用 react-redux v5 设置 React v15.5 时，路由不导航

【英文标题】：Routes are not navigating when React v15.5 setup with react-redux v5 is

【发布时间】：2017-12-17 22:15:48

【问题描述】：

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

Index.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')
);

Routes.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;

App.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。

我不知道我是否在代码中犯了一些愚蠢的错误或缺少某些东西。

提前致谢。 :)

【问题讨论】：

你也可以复制粘贴控制台日志吗？

控制台没有错误，只对未使用的导入文件发出警告。

如果我从 index.js 中完全删除 redux... 那么路由工作正常...

【参考方案1】：

解决办法是here

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 中。