我是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 ,它不在更新的包中。
我不知道我是否在代码中犯了一些愚蠢的错误或者缺少某些东西。
提前致谢。 :)
答案 0 :(得分:4)
解决方案是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可以很好地协同工作。有时,应用程序可能有一个组件在位置更改时不会更新(子路径或活动导航链接不会更新)。
如果出现这种情况:
问题是Redux实现了shouldComponentUpdate,如果没有从路由器接收道具,则没有任何迹象表明已经发生了变化。这很容易解决。找到连接组件的位置并将其包装在withRouter中。