[ROUTER] phân biệt cách sử dụng Reactjs - `component` vs `render` in Route ( ok)

Điều khác biệt lớn nhất ở dây là nếu sử dụng component không truyền thêm props vào được nữa

còn render thì bạn có thể truyền thêm props tùy ý của bạn :)

và sau đây là ví dụ bạn hiểu rõ hơn :)

C:\Users\Administrator\Desktop\route\src\App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      books: "Happy"
    };
  }
  render() {
    return (
      <div className="App">
        <Router>
          <header>
            <nav>
              <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
              </ul>
            </nav>
          </header>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" render={(props) => <About books={this.state.books} />} />  
        </Router>
      </div>
    );
  }
}
export default App;

C:\Users\Administrator\Desktop\route\src\components\About\index.js

import React, { Component } from 'react';
class About extends Component {
  render() {
    return (
      <div>
        About
        {
        	console.log(this.props.books)
        }
      </div>
    );
  }
}
export default About;

Và khi truyền vào component nó bị lỗi như này đây :(