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>
        );
    }
}

将props传递给组件react-router 1.0.x

1 个答案: