首页 文章

React Redux和react-router-dom

提问于
浏览 次
8

我正在学习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 /列表或如果我点击它工作 .

但是我觉得我做错了，并且正确的方法应该是内部index.js

所以我应该这样做：

<Router>
  <Provider store={store}>
    <App />
  </Provider>,
</Router>

的document.getElementById（ '根'），

然后在Main.js

<div className="wrapper">
  <Header />
  <Route exact path="/" component={Listing} />
  <Route path="/list" component={SingleListing} />
  <Footer />
</div>

但是，当我这样做时，如果我直接进入localhost / list链接，我可以看到该组件，但如果我碰上任何链接，则没有任何反应 .

我对如何正确使用带有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上研究了这个网站和很多教程，但我不明白我的代码是否正确，我知道它有效，但我有兴趣学习这是否正确 . 谢谢！

javascript reactjs redux react-router-dom

1 回答

  • 3

    是的，您正在正确编写路由器 . 您的担忧是可以理解的 . 在版本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作为参考，似乎是正确的 .

    回复于

相关问题