从路由获取属性

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

当我点击 home 路线*时，我希望我的 Header 组件显示 Home。

当我点击 about 路线时，我希望我的 Header 组件显示 About.

此时，我的 Header 组件不显示任何内容。 this.props.title 在我的 App 组件中是 undefined。看起来您无法从 <Route />

传递属性

有办法实现吗？

或者有别的办法吗？例如，您可以 从子元素（this.props.children.title 或类似的东西）中 得到一些东西 吗？

Answer 1

看起来路由注入了 routes 属性和匹配路由列表。列表中的最后一条路线具有您指定的道具。参见 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 并维护标题的查找 table。

最好和最灵活的选项可能是 boilerplate-heavy 选项，您可以在其中定义模板，然后跨组件重用它：

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>
        )
    }
}

从路由获取属性

Get properties from Routes

javascript

reactjs

react-router