当使用 react-redux v5 设置 React v15.5 时，路由不导航 [英] Routes are not navigating when React v15.5 setup with react-redux v5 is

问题描述

我是 React 的新手，我已经使用 Facebook 的

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

提前致谢.:)

解决方案

解决方案是 这里

import { withRouter } from 'react-router-dom'//前导出默认连接(mapStateToProps)(东西)//后从'react-router-dom' 导入 { withRouter }导出默认 withRouter(connect(mapStateToProps)(Something))

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

如果:

• 组件通过 connect()(Comp) 连接到 redux.
• 该组件不是路由组件"，这意味着它不会像这样呈现:

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

I am new with React and I have setup my React project with Facebook's create-react-app. Here are the core files:

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;

The problem I am facing here is, When I am loading page with specific route, then, that component is rendering on browser. But if I am navigating to different route using "Link", say

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

In that case, /contact component is not loading but the route is changing and reflecting in browser.

I looked for solutions, but mostly using depreciated code, Even in react-router-redux, example contains ConnectedRouter which is not in updated package.

I don't know if I have done some silly mistake in code or something is missing.

Thanks in advance. :)

解决方案

The solution is 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))

Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component that doesn’t update when the location changes (child routes or active nav links don’t update).

This happens if:

• The component is connected to redux via connect()(Comp).
• The component is not a "route component", meaning it is not rendered like so: <Route component={SomeConnectedThing}/>

The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

这篇关于当使用 react-redux v5 设置 React v15.5 时，路由不导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！