获取 React 路由器 4 中路由中定义的属性值

Question

如何获取路由中定义的属性值？

export default () => (
    <Router>
        <App>           
            <Route exact path="/" title="Home" componenet={Home} />                 
            <Route exact path="/about" title="About" component={About} />
        </App>
      </Router>
);

我想在 app.js 中获取标题

export default class App extends React.Component {
    componentDidMount() {       
        console.log(this.props.title);
    }
}

但是，它返回 undefined。

Answer 1

您将 title 属性传递给 Route 组件，而不是 App 组件。如果您在App 中需要title，则需要显式传递：

export default () => (
    <Router>
        <App title="Home">           
            <Route exact path="/" title="Home" componenet={Home} />                 
        </App>
      </Router>
);

但这可能不是您想要实现的目标，因为您的 app 中包含多个 titles。