React Redux 和 react-router-dom

Posted 2023-02-22

【中文标题】React Redux 和 react-router-dom

【英文标题】：React Redux and react-router-dom

【发布时间】：2017-10-04 20:40:51

【问题描述】：

我正在学习 Redux，对于 react-router-dom 的新变化，我有点困惑。 我有这些文件：

索引.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>

但是，当我这样做时，如果我直接转到链接 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 上研究了这个网站和许多教程，但我不明白我的代码是否正确，我知道它有效，但我有兴趣了解这是否是正确的方法。 谢谢！

【参考方案1】：

是的，您正在正确编写路由器。你的担心是可以理解的。在 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做参考，好像是对的。

【讨论】：

随时！如果您发现这回答了您的问题，您可以将其标记为响应吗？谢谢！

在你的 App.js 文件 browserHistory 应该是符号 ' ' 。我正在纠正这个问题，因为我喜欢你的回答:)

@PeakSornpaisarn 嘿！你是对的，我已经解决了，谢谢你指出这一点！