Phác đồ phản ứng-router-dom phản ứng với thành phần

Question

Tôi cần truyền đạo cụ cho bộ phận sử dụng bộ định tuyến. Dưới đây là mã của tôi:

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import AppBarTop from './appbar/AppBarTop'; 

import Login from '../pages/login/Login'; 
import {BrowserRouter as Router, Route} from 'react-router-dom'; 


class App extends Component { 

    render() { 

     const { isAuthenticated } = this.props; 

     return (
      <Router> 
       <div> 
        <AppBarTop isAuthenticated={isAuthenticated} /> 
        <div className="content"> 
         <Route path="/login" isAuthenticated={isAuthenticated} component={Login} /> 
        </div> 
       </div> 
      </Router> 
     ); 
    } 
} 

Như bạn thấy, isAuthenticated các prop tôi muốn vượt qua để Đăng nhập thành phần.

class Login extends Component { 

    constructor(props) { 
     super(props); 
     console.log(props); 
    } 

    render() { 
     return (
      <LoginForm /> 
     ); 
    } 

} 

export default connect(null) (Login); 

Khi tôi đăng nhập các đạo cụ các isAuthenticated prop không có ở đó. Những gì tôi đang làm sai? Làm thế nào tôi có thể vượt qua prop một cách chính xác? Tôi đã theo dõi các tài liệu và các cuộc thảo luận khác. Từ sự hiểu biết của tôi nó sẽ hoạt động. Các phiên bản của phản ứng-router và phản ứng-router-dom là 4.0.0

Answer 1

đèo nó như thế này:

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/> 

Nó nên có sẵn bởi this.props.isAuthenticated trong Login Component.

Lý do của {...props}:

Nếu chúng ta không viết những dòng này thì chỉ isAuthenticated sẽ có được thông qua để Đăng nhập thành phần, tất cả các giá trị khác mà bộ định tuyến đi đến thành phần, sẽ không có sẵn phần Login bên trong. Khi chúng tôi viết {...props} thì chúng tôi sẽ chuyển tất cả các giá trị với một giá trị bổ sung.

Và thay vì sử dụng component với phương pháp sử dụng bộ định tuyến render.

Theo DOC:

Component:

Khi bạn sử dụng thành phần (thay vì render hay trẻ em, dưới đây) router sử dụng React.createElement để tạo ra một yếu tố Phản ứng mới từ cho thành phần. Điều đó có nghĩa là nếu bạn cung cấp hàm nội dòng cho thuộc tính thành phần , bạn sẽ tạo thành phần mới mỗi lần hiển thị. Điều này dẫn đến việc tháo lắp thành phần hiện tại và lắp đặt thành phần mới thay vì chỉ cập nhật thành phần hiện có. Khi sử dụng hàm nội tuyến để hiển thị nội dòng, hãy sử dụng kết xuất.

Render:

này cho phép kết xuất inline thuận tiện và gói mà không remounting không mong muốn.