React-router：将道具传递给儿童

我正在尝试通过使用react-router Build 一个非常基本的“投资组合”网站来学习React . 我的主要组件是：App，Work，Project和ProjectDetail . 在“工作”页面上，您应该能够看到所有项目缩略图和 Headers . 单击特定项目应该会将您引导至该项目的详细信息页面，其中将包含项目其余部分的详细信息 . 如何将Project的道具传递给ProjectDetail？

我的文件：

main.js
/*
  Routes
*/

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <IndexRoute component={Work} />
            <Route path="work" component={Work} />
            <Route path="work/:id" component={ProjectDetail} />
            <Route path="about" component={About} />
        </Route>
    </Router>
);

ReactDOM.render(routes, document.getElementById('main'));

App.js
/*
  App
*/


class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/work">Work</Link></li>
                    <li><Link to="/about">About</Link></li>
                </ul>
                {this.props.children}
                <footer>footer</footer>
            </div>
        )
    }
}

export default App;

Work.js
class Work extends React.Component {
    render() {
        return (
            <div>
                <p>Work</p>
                <ul>
                    {/* Need to loop of all projects */}
                    {PROJECTS.map(project => (
                        <li key={project.id}>
                            <Project project={project} />
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default Work;

Project.js
class Project extends React.Component {
    render() {
        var project = this.props.project;
        var linkTo = "/work/" + project.id;

        return (
            <Link to={linkTo}>
                {project.title}
                <span> </span>
                {project.type}
             </Link>
        )
    }
}

export default Project;

ProjectDetail.js
class ProjectDetail extends React.Component {
    render() {
        return (
            <div>
                {/* THIS IS WHAT INFORMATION I NEED */}
                {this.props.project.title}
                {this.props.project.description}
                {this.props.project.type}
                {this.props.project.technologies}
            </div>
        )
    }
}

export default ProjectDetail;

我可以访问Project组件中的数据，但是如何将其传递给ProjectDetail，因为我从未明确使用ProjectDetail组件（仅用于我的路由）？

编辑：我应该补充一点，我想我在技术上并没有尝试将道具传递给孩子，因为一旦你被路由到ProjectDetail，Project就不再呈现了 . 这会让这变得不可能吗？