当将带有react-redux v5的React v15.5设置为 [英] Routes are not navigating when React v15.5 setup with react-redux v5 is

问题描述

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

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

先谢谢了.:)

解决方案

解决方案是

通常，React Router和Redux可以很好地协同工作.不过，有时候，应用程序可能包含一个组件，该组件在位置更改时不会更新(子路径或活动的导航链接不会更新).

在以下情况下会发生这种情况:

• 该组件通过connect()(Comp)连接到redux.
• 该组件不是路由组件"，这意味着它的呈现方式不是这样:< Route component = {SomeConnectedThing}/>

问题在于Redux实现了shouldComponentUpdate，如果没有从路由器接收道具，则没有任何变化的迹象.这很容易解决.找到您将组件连接到哪里，并使用Router将其包装.

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屋！