将道具传递到组件react-router 1.0.x

Question

我正在使用react-router 1.0.2。 我有一个表示产品目录的组件目录，我不想为每个不同的产品编写不同的目录，而是要重用现有产品并从路由器传递productType作为prop。 这个版本的react-router应该怎么做？ 到目前为止，我没有成功尝试过...谢谢

ReactDOM.render(
<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>

            <Route path="phones" component={Catalog} productType="phones"/>
            <Route path="about" component={About}/>
            <Route path="login" component={Login}/>

        </Route>
    </Router>
</Provider>,
document.getElementById('main')

）;

Answer 1

我会尽可能让您的路线通用，这是我认为您要达到的目标。 为此，您可以从Catalog组件中查看当前路径，并根据其内容来呈现其他子元素。 假设您有一个Product组件，则可以将产品类型传递给该组件。

因此，如果您有路线：

<Route path="catalog/:productType" component={Catalog}/>

您可以这样做：

class Catalog extends React.Component {
    render() {
        let productType = this.props.params.productType;

        return (
            <div className="catalog">
                <Product type={productType}/>
            </div>
        );
    }
}