ReactJS 路由器不路由答案

【问题标题】：ReactJS Router Not RoutingReactJS 路由器不路由
【发布时间】：2017-02-15 22:23:02
【问题描述】：

正在努力让 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'))

【问题讨论】：

什么版本的 react-router？
“反应路由器”：“^3.0.2”
您是否尝试为/test 和/parameter 添加/？

标签： javascript reactjs react-router

【解决方案1】：

您没有指定嵌套组件在App 组件中的呈现位置。 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>
        )
    }
}

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

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

【讨论】：

【解决方案2】：

如果您使用的是 React Router v4，我认为嵌套组件未呈现的原因是您无法在 React Router v4 中嵌套 <Route />s。

我之前提出了一个问题：

How to nest routes in React Router v4?

【讨论】：

我正在使用 React Router 3