正文 

当前位置： 首页 > 知识 >

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

     2023-02-21     54

关键词：

【中文标题】当使用 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。 该组件不是“路由组件”，这意味着它不会像这样呈现：&lt;Route component=SomeConnectedThing/&gt;

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

【讨论】：

是否可以在 React-Redux 应用程序中使用 Immutable.js 来比较 shouldComponentUpdate 中的道具？

】是否可以在React-Redux应用程序中使用Immutable.js来比较shouldComponentUpdate中的道具？【英文标题】：WoulditbepossibletoutilizeImmutable.jsinaReact-ReduxApplicationforcomparingpropsinshouldComponentUpdate?【发布时间】：2017-01-2918:01:02【问题描述】：我目... 查看详情

React-Redux mapStateToProps 值在被reducer设置后未定义

】React-ReduxmapStateToProps值在被reducer设置后未定义【英文标题】：React-ReduxmapStateToPropsvalueisundefinedafterbeingsetbyreducer【发布时间】：2018-07-1315:25:27【问题描述】：我正在尝试使用一些用于测试的虚拟数据来初始化我的应用程序的状... 查看详情

react-router搭配react-redux无法监听路由变化的问题

在react中，要将react组件连接到redux中，通常会这样包装组件classHomeextendsComponent{}functionselect(state){return{logBox:state.logBox}}exportdefaultconnect(select)(Home)但是当搭配react-router的时候，在进行路由跳转的时候，组件不会重新render。这个时候... 查看详情

如何使用 react-redux 实现登录认证？

】如何使用react-redux实现登录认证？【英文标题】：Howtoimplementloginauthenticationusingreact-redux?【发布时间】：2017-05-1010:34:23【问题描述】：经过一番研究，JWT通常用于登录身份验证，因为它具有紧凑的性质和易于解析的特点。我已... 查看详情

使用 react-redux 连接功能时渲染组件上的打字稿错误

】使用react-redux连接功能时渲染组件上的打字稿错误【英文标题】：Typescripterroronrenderedcomponentwhenusingreact-reduxconnectfunction【发布时间】：2018-06-2701:55:58【问题描述】：我有一个组件类，我正在使用react-redux连接redux存储，但是当我... 查看详情

将 react-redux useSelector 与打字稿一起使用

】将react-reduxuseSelector与打字稿一起使用【英文标题】：Usereact-reduxuseSelectorwithtypescript【发布时间】：2019-10-0623:22:00【问题描述】：当尝试使用react-reduxtypescript的新的useSelector钩子（见下面的例子）时，会出现函数不存在的错误：... 查看详情

无法让 React-redux 与 redux-persist 一起使用

】无法让React-redux与redux-persist一起使用【英文标题】：Can\'tgetReact-reduxtoworkwithredux-persist【发布时间】：2018-06-0409:47:23【问题描述】：您好，我正在尝试使用react-redux设置redux-persist，但无法使其正常工作。我收到以下错误：TypeErro... 查看详情

使用 connect 与 react-redux 和 redux-persist

】使用connect与react-redux和redux-persist【英文标题】：Usingconnectwithreact-reduxandredux-persist【发布时间】：2018-06-0621:39:50【问题描述】：我的react-redux和redux-persist设置出现以下错误：上述错误发生在组件中：在Connect(App)中（由Route)inRoute... 查看详情

连续的 Material-UI Snackbars（使用 React-Redux）

】连续的Material-UISnackbars（使用React-Redux）【英文标题】：ConsecutiveMaterial-UISnackbars(withReact-Redux)【发布时间】：2020-12-1506:13:10【问题描述】：我没有将许多快餐栏分散在许多组件中，而是将我的应用程序重构为具有一个自定义组... 查看详情

如何使用react-redux将redux商店中封装的ui状态映射到道具？

】如何使用react-redux将redux商店中封装的ui状态映射到道具？【英文标题】：Howtomapencapsulateduistateinareduxstoretopropswithreact-redux?【发布时间】：2016-12-0315:41:03【问题描述】：我无法弄清楚如何组合ui小部件减速器和串联反应渲染树，... 查看详情

如何使用 react-native-firebase v5 正确设置前台通知？

】如何使用react-native-firebasev5正确设置前台通知？【英文标题】：Howtocorrectlysetupforegroundnotificationsusingreact-native-firebasev5?【发布时间】：2019-11-2916:32:42【问题描述】：我们有一个react-native应用，它通过FCM在以下环境中运行通知：re... 查看详情

想做 dispatch.then(...)

】想做dispatch.then(...)【英文标题】：wanttododispatch.then(...)【发布时间】：2016-07-1109:49:53【问题描述】：我使用redux、react-redux、react-router、react-router-redux和redux-thunk。importcreateStore,applyMiddlewarefrom\'redux\'importProviderfrom\'rea 查看详情

当我有自定义基本 URL 时，如何使用 swagger 设置 Swashbuckle v5？

】当我有自定义基本URL时，如何使用swagger设置Swashbucklev5？【英文标题】：HowdoIsetupSwashbucklev5withswaggerwhenIhaveacustombaseurl?【发布时间】：2020-05-1115:31:05【问题描述】：我正在将.netAPI升级到.netCore3.1并使用Swashbuckle.AspNetcore5.4.1。API... 查看详情

我的 react-redux 项目中的 css 来自哪里

】我的react-redux项目中的css来自哪里【英文标题】：whereismycsscomingfrominmyreact-reduxproject【发布时间】：2018-09-1208:14:41【问题描述】：我正在做他们全栈应用教程的thinksterreact-redux部分。一切进展顺利，但是当我在教程中添加方面时... 查看详情

强烈键入 react-redux 与 typescript 连接

】强烈键入react-redux与typescript连接【英文标题】：Stronglytypingthereact-reduxconnectwithtypescript【发布时间】：2018-06-2520:06:54【问题描述】：我在尝试为我的反应组件键入参数时遇到错误。我想在组件的props和state上输入哪些属性，但是... 查看详情

从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法

】从react-redux迁移到redux-toolkit后使用configureStore传递初始状态的最佳方法【英文标题】：thebestwaytopassinitialstatewithconfigureStoreaftermigrationfromreact-reduxtoredux-toolkit【发布时间】：2021-11-1707:55:59【问题描述】：场景是当用户登录时，我... 查看详情

如何使用 react-redux 调试 action.type 问题，单动作类型单减速器，但无法识别类型

】如何使用react-redux调试action.type问题，单动作类型单减速器，但无法识别类型【英文标题】：Howtodebugaction.typeissuewithreact-redux,singleactiontypesinglereducerbutit\'snotrecognizingthetype【发布时间】：2019-08-3105:56:52【问题描述】：我正在设置... 查看详情

将酶.mount().setProps 与 react-redux Provider 一起使用

】将酶.mount().setProps与react-reduxProvider一起使用【英文标题】：usingenzyme.mount().setPropswithareact-reduxProvider【发布时间】：2017-07-1909:37:24【问题描述】：我有一个设置props的测试，以观察组件的一些变化。唯一的复杂之处是我将渲染的... 查看详情