使用 React-Router v4 在 Redux 应用程序中渲染 React 组件答案

【问题标题】：Rendering React component in Redux application with React-Router v4使用 React-Router v4 在 Redux 应用程序中渲染 React 组件
【发布时间】：2018-11-12 00:46:35
【问题描述】：

这是我尝试将 React-Router4 集成到 React/Redux 应用程序中的第一次尝试。在阅读文档和一篇（非常好的）CSS-Tricks 文章时，我已经被困在第一个障碍上几个小时了。

问题是不会渲染我在组件 prop 上输入的“任何”值，它应该是一个组件。

实际上，我几乎完全通读了（优秀的）文档，从这里开始：https://reacttraining.com/react-router/web/guides/quick-start

我查阅过这篇文章：https://css-tricks.com/react-router-4/ 其中还包括这个 Codepen（看看我是否做了一些明显/愚蠢的事情）：https://codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js

我只是希望 SO 上的某个人能够推动我克服这个困难。我期望至少能够非常简单地呈现这个，而无需任何额外的库或基于以下内容对我的商店进行调整：https://reacttraining.com/react-router/web/guides/redux-integration

入口点，index.js：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import store from './stores'
import { Provider } from 'react-redux'
import Home from './components/Home'
import TopStories from './components/TopStories'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// app entry point
const app = (
    <Provider store={store.configure(null)}>
        <Router>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/topstories" component={TopStories} />
            </Switch>
        </Router>
    </Provider>
)

// virtual DOM render
ReactDOM.render(app, document.getElementById('root'))

TopStories.js 组件（如果我用 Home 切换它，则在“/”路径中呈现正常）

import React, { Component } from 'react'

export default (props) => {
  return(
    <div>Top Stories component </div>
    )

}

【问题讨论】：

标签： reactjs redux react-redux react-router-v4

【解决方案1】：

我试图通过在浏览器中输入路径来进行测试.... Duh。我只需要设置一个快速链接组件，一切正常。

【讨论】：