React Redux 和 react-router-dom
React Redux and react-router-dom
我正在学习Redux,随着react-router-dom的新变化,我有点迷茫。
我有这些文件:
Index.js
import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
App.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from '../components/Main';
function mapStateToProps(state) {
return {
search: state.search,
navigation: state.navigation,
};
}
export function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;
最后,Main.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Listing from './Listing';
import SingleListing from './SingleListing';
const Main = () => (
<Router>
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
</Router>
);
export default Main;
当我转到 localhost:3000/list 或单击它时,这段代码工作正常。
不过我觉得自己做错了,正确的做法应该是包裹在里面index.js
所以我应该这样做:
<Router>
<Provider store={store}>
<App />
</Provider>,
</Router>
document.getElementById('root'),
然后在 Main.js
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
然而,当我这样做时,如果我直接转到 link localhost/list 我可以看到该组件,但是如果我在任何 link 上 clink 什么都没有发生了。
我对如何正确使用带有 redux 的路由器感到困惑。
这是我在 reducers/index.js
中使用的代码
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import search from './search';
import navigation from './navigation';
const rootReducer = combineReducers({ search, navigation, routing: routerReducer });
export default rootReducer;
我已经在网上和 youtube 上研究了这个网站和许多教程,但我不明白我的代码是否正确,我知道它有效,但我有兴趣了解这是否是正确的方法。
谢谢!
是的,你写的路由器是对的。你的担心是可以理解的。在 4.0.0 版本之前,react-router
有一种不同的方式来声明路由。您将像在第二个示例中那样定义一个路由器,但不是在组件中定义路由,而是在路由器内定义路由。这是 4.0.0 之前 react-router
的示例:
App.js:
//<boilerplate imports>
import Home from './components/Home';
import router from './router';
import './index.css';
ReactDOM.render(
<Router router='router' history='browserHistory'>
</Router>,
document.getElementById('root')
);
router.js:
//<boilerplate imports>
import Photographer from './components/photographer/Photographer';
import Developer from './components/developer/Developer';
import Home from './components/Home';
export default (
<Route path="/">
<IndexRoute component={Home} />
<Route path="photographer" component={Photographer} />
<Route path="developer" component={Developer} />
</Route>
);
您将在一个地方定义路由器和所有路由、子路由和组件,并最终将其提供给 ReactDOM.render()
话虽如此,第一种做事方式是正确的,也是 React Router 背后的人希望人们使用界面的方式。
关于最后一个问题,您是否在使用 react-router-redux
时收到该代码的错误?参考看this,好像是对的
我正在学习Redux,随着react-router-dom的新变化,我有点迷茫。 我有这些文件:
Index.js
import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
App.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from '../components/Main';
function mapStateToProps(state) {
return {
search: state.search,
navigation: state.navigation,
};
}
export function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;
最后,Main.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Listing from './Listing';
import SingleListing from './SingleListing';
const Main = () => (
<Router>
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
</Router>
);
export default Main;
当我转到 localhost:3000/list 或单击它时,这段代码工作正常。
不过我觉得自己做错了,正确的做法应该是包裹在里面index.js
所以我应该这样做:
<Router>
<Provider store={store}>
<App />
</Provider>,
</Router>
document.getElementById('root'),
然后在 Main.js
<div className="wrapper">
<Header />
<Route exact path="/" component={Listing} />
<Route path="/list" component={SingleListing} />
<Footer />
</div>
然而,当我这样做时,如果我直接转到 link localhost/list 我可以看到该组件,但是如果我在任何 link 上 clink 什么都没有发生了。
我对如何正确使用带有 redux 的路由器感到困惑。 这是我在 reducers/index.js
中使用的代码import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import search from './search';
import navigation from './navigation';
const rootReducer = combineReducers({ search, navigation, routing: routerReducer });
export default rootReducer;
我已经在网上和 youtube 上研究了这个网站和许多教程,但我不明白我的代码是否正确,我知道它有效,但我有兴趣了解这是否是正确的方法。 谢谢!
是的,你写的路由器是对的。你的担心是可以理解的。在 4.0.0 版本之前,react-router
有一种不同的方式来声明路由。您将像在第二个示例中那样定义一个路由器,但不是在组件中定义路由,而是在路由器内定义路由。这是 4.0.0 之前 react-router
的示例:
App.js:
//<boilerplate imports>
import Home from './components/Home';
import router from './router';
import './index.css';
ReactDOM.render(
<Router router='router' history='browserHistory'>
</Router>,
document.getElementById('root')
);
router.js:
//<boilerplate imports>
import Photographer from './components/photographer/Photographer';
import Developer from './components/developer/Developer';
import Home from './components/Home';
export default (
<Route path="/">
<IndexRoute component={Home} />
<Route path="photographer" component={Photographer} />
<Route path="developer" component={Developer} />
</Route>
);
您将在一个地方定义路由器和所有路由、子路由和组件,并最终将其提供给 ReactDOM.render()
话虽如此,第一种做事方式是正确的,也是 React Router 背后的人希望人们使用界面的方式。
关于最后一个问题,您是否在使用 react-router-redux
时收到该代码的错误?参考看this,好像是对的