Question

我正在观看有关使用React Router v4

的视频

在此视频中，我们使用creat-react-app创建了我们项目的基本模板。

基本模板为我们提供了App.js，自从我是初学者以来，我就习惯了在其中导入所有内容。

这是我的app.js与Redux一起使用的外观

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Provider } from 'react-redux';
import PostFrom from './components/postform.js'
import Posts from './components/post.js'
import store from './store'


 class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
        <PostFrom />
        <hr />
        <Posts />
        </div>
      </Provider>
    );
  }
}

export default App;

现在，在视频中的4:20，该人从app.js中删除了所有内容，使其变成了这样的

import React from 'react';
import Routes from './routes';

export default () => <Routes />

现在，我很困惑如何在这里使用redux？就像以前学习redux一样，讲师使用此方法导入了create Store

import store from './store'

做了这样的事情

<Provider store={store}>

那我怎么在这里使用redux？

Answer 1

在此视频讲师中，路由是在单独的文件中设置的。然后将这些路线导入到应用程序中。因此，在此逻辑中，App仅包含路由。您可以在两个地方使用error_message: "invalid literal for int() with base 10: ''",。这取决于你。重要的部分是Provider的作用。在您的上一个问题中，以下是可接受的答案中的相关部分：

提供商组件提供了向其任何子级提供Redux商店的功能，并且要在子级中接收商店，您可以将子级连接到提供商。

因此，一种方法是按照@HåkenLid在类似的注释（在App.js中）中建议的方式进行操作：

Provider

第二种选择是在Route组件中执行此操作：

import React from "react";
import Routes from "../routes";
import { Provider } from "react-redux";
import store from "../store";

export default () => (
  <Provider store={store}>
    <Routes />
  </Provider>
);

在应用的呈现部分的index.js中执行此操作的第三种方式：

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "../components/Home";
import { Provider } from "react-redux";
import store from "../store";


export default () => (
  <Provider store={store}>
      <BrowserRouter>
        <Route path="/" component={Home} />
      </BrowserRouter>
  </Provider>
);

因此，选择权由您决定。以上所有示例均来自this sandbox。

在路由上使用redux

1 个答案: