將道具傳遞到組件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>
        );
    }
}