Chuyển Đạo cụ tới React-Router 4.0.0 Đường dành cho Trẻ em

Question

Tôi đang cố gắng di chuyển ứng dụng phản ứng bộ định tuyến 3.0.0 hiện tại sang 4.0.0. Trong bộ định tuyến, tôi cần chuyển thêm một số không liên quan đến định tuyến prop cho con của nó.

Có một vài cách hơi khó để thực hiện việc này trong các phiên bản trước của bộ phản ứng-router, detailed in this post. Sở thích cá nhân của tôi là this method sử dụng cloneElement, vì nó đảm bảo rằng tất cả các phản ứng-router đạo cụ đã được sao chép qua cũng như:

// react-router 3.0.0 index.js JSX 
<Router history={browserHistory} 
    <Route path="/" component={App}> 
    <Route path="/user/:userId" component={User} /> 
    <IndexRoute component={Home} /> 
    </Route> 
</Routes> 

// App component JSX (uses cloneElement to add a prop) 
<div className="App"> 
    { cloneElement(props.children, { appState: value }) } 
</div> 

Cho đến nay phần App mới của tôi trông giống như:

// react-router 4.0.0 App component JSX (moved routing code out of index.js and into here) 
<BrowserRouter> 
    <div className="App"> 
    <Match exactly pattern="/" component={Home} /> 
    <Match pattern="/user/:userId" component={User} /> 
    <Miss component={Home} /> 
    </div> 
</BrowserRouter> 

gì là cách tốt nhất để thêm các appState prop cho mỗi thành phần của Match trong khi giữ lại các đạo cụ bộ định tuyến được cung cấp?

Answer 1

<Route> có thể mất render chống thay vì component. Điều này cho phép bạn nội tuyến định nghĩa thành phần.

<Route path='/user/:userId' render={(props) => (
    <User appState={value} {...props} /> 
)} />