将 props 传递给组件 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>
        );
    }
}

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

Pass props to components react-router 1.0.x

javascript

reactjs

react-router