从Routes获取属性

Get properties from Routes

本文关键字：属性 获取 Routes      更新时间：2023-09-26

我无法从<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'))

/组件/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。

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

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

有办法做到这一点吗？

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

看起来路由注入了一个带有匹配路由列表的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并维护一个标题查找表。

最好和最灵活的选择可能是样板文件重的选择，在那里你定义模板，然后在组件之间重用它：

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>
        )
    }
}
相关文章：