Question

我正在使用3.0.0版本react-router和15.3.2版本react/react-dom。

我的应用很简单，渲染一个小红框。组件App是作为一个类编写的，因为它会添加更多，但我确信我可以将它写成一个简单的const，但是它旁边了点。该应用程序如下所示：

import React from 'react'
import {render} from 'react-dom'

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App:</h1>
                <Home />
            </div>
        );
    }
}

const Home = (props) =>
    <div>
        <p>This app renders a red box!</p>
        <div style={{background: 'red', width: 100, height: 100}}></div>
    </div>

render(
    <App></App>,
    document.getElementById('app')
)

然而，当我尝试设置一个非常简单的路由时，根本没有渲染！我的代码是：

import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute} from 'react-router'

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App:</h1>
                {this.props.children}
            </div>
        );
    }
}

const Home = (props) =>
    <div>
        <p>This app renders a red box!</p>
        <div style={{background: 'red', width: 100, height: 100}}></div>
    </div>

render(
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Home}></IndexRoute>
        </Route>
    </Router>,
    document.getElementById('app')
)

为什么没有渲染？我完全误解了react-router吗？

无法使用React-Router呈现任何组件

0 个答案: