Question

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

问题是我不会渲染我在组件道具处输入的'Whatever'值，它应该是一个组件。

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

我只是希望有人可以在这个驼峰上推动我。我希望至少能够在没有任何额外库的情况下简单地呈现这一点或基于以下内容调整我的商店：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组件（如果我将其切换为主页，则在'/'路径中呈现正常）

import React, { Component } from 'react'

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

}

Answer 1

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

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

1 个答案: