react-router将先前的路由道具传递到子路由

Question

是否有一种方法可以使用react-router将道具从父组件传递到子组件？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a class='btn btn-origin' href="#">Get in touch</a>
                <div class='menu-icon'>
                    <div class='hamburger'></div>
                </div>
                <div class='menu-content'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Location</a></li>
                    </ul>
                </div>

注意子级未在父级的渲染功能中渲染。

谢谢

Answer 1

我认为这是一个不错的解决方案，那就是使用渲染道具嵌套路线。

// Parent.jsx

render() {
  const { match: { url }, xyz } = this.props;
  return (
    <Route path={`${url}/child`} render={() => <Child xyz={xyz} />}
  );
}