javascript - 从路线获取属性

Question

我无法从 <Route /> 传递属性

这是一些代码:

./app.jsx (主应用)

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'
import App from './components/app'
import Home from './components/home'
import About from './components/about'

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

./components/app.jsx

import React from 'react';
import Header from './template/header'

class App extends React.Component {
    render() {
        return (
            <div>
                <Header title={this.props.title} />
                {this.props.children}
            </div>
        )
    }
}

export default App

./components/template/header.jsx

import React from 'react'

class Header extends React.Component {
    render() {
        return (
            <span>{this.props.title}</span>
        )
    }
}

export default Header

当我点击我的家路线*时，我想要我的 Header要显示的组件 Home 。

当我点击我的关于路线时，我想要我的Header要显示的组件 About .

此时，我的Header组件什么也不显示。 this.props.title是 undefined在我的App成分。看起来您无法从 <Route /> 传递属性

有办法实现吗？

或者还有其他方法吗？例如，您可以从子元素中获取一些东西(this.props.children.title或类似的东西)吗？

Answer 1

看起来路由注入(inject)了一个 routes 属性以及匹配路由的列表。列表中的最后一条路线具有您指定的 Prop 。请参阅http://codepen.io/anon/pen/obZzBa?editors=001

const routes = this.props.routes;
const lastRoute = routes[routes.length - 1];
const title = lastRoute.title;

我会犹豫是否要使用它，因为 routes 没有记录在 Injected Props 中。 ，所以我不知道它跨版本更新的可靠性如何。一个更简单的选项(虽然不太清晰)是使用 this.props.location.pathname 并维护一个标题查找表。

最好、最灵活的选项可能是大量样板文件的选项，您可以在其中定义模板，然后跨组件重用它:

class Template extends React.Component {
    render() {
        return (
            <div>
                <Header title={this.props.title} />
                {this.props.children}
            </div>
        )
    }
}

class About extends React.Component {
    render() {
        return (
            <Template title="About">
                Some Content
            </div>
        )
    }
}