时间戳

首页 > 解决方案 > 使用 React-Router v4 在 Redux 应用程序中渲染 React 组件

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

问题描述

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

问题是不会呈现我在组件道具中输入的“任何”值，它应该是一个组件。

我实际上几乎完全通过（优秀）文档阅读，从这里开始：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>
    )

}

标签： reactjsreduxreact-reduxreact-router-v4

解决方案

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

推荐阅读