javascript - ReactJS Router 不路由

Question

正在努力让 React-Router 为 SPA 工作，但我似乎无法让它渲染除 App 组件之外的任何内容。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import Parameter from './components/parameter/Parameter';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container">
                <h1>TEST</h1>
                <Link to="/parameter">Click Me!</Link>
            </div>
        )
    }
}

class Test extends React.Component {
    render() {
        return (
            <div className="container">
                <h1>TEST PAGE</h1>
            </div>
        )
    }
}

var routes = (
    <Route name="root" component={App} path="/">
        <Route component={Test} path="test" />
        <Route component={Parameter} path="parameter" />
    </Route>
)

ReactDOM.render((
    <Router history={browserHistory} routes={routes} />
), document.getElementById('react'))

Answer 1

您没有指定希望嵌套组件在 App 中呈现的位置。成分。 App组件的行为类似于所有嵌套路由的布局。

当命中特定路由时，为嵌套路由指定的组件需要在布局/父组件中找到一个位置。

实现此功能的最简单方法是使用 {this.props.children}在你的App中的某个地方成分。请参阅下面我的示例。

这又是您的应用程序组件:

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container">
                <h1>TEST</h1>
                <Link to="/parameter">Click Me!</Link>
                {this.props.children}
            </div>
        )
    }
}

有关更深入的示例，请参阅 active-links来自 React-router 存储库的示例。在他们的示例中，您可以看到 children可作为 App 中的 Prop 使用组件，并且当命中相关路由时，将渲染嵌套路由中的任何其他组件。例如，点击/路线将呈现 Index App内的组件哪里{children}被定位是因为有直接嵌套的路由<IndexRoute ... />存在。

React 提供 this.props.children作为访问组件子组件的一种方式。它允许您将组件作为数据传递给另一个组件。在本例中，渲染 App 内的子组件组件。