Link to the MovieForm

Sekarang kita akan membuat detail untuk movie

App.js

import { Route, Redirect, Switch } from 'react-router-dom';
import Movies from './components/movies';
import MovieForm from './components/movieForm';
import Rentals from './components/Rentals';
import NotFound from './components/notFound';
import Customers from './components/Customers';
import NavBar from './components/NavBar';
import './App.css';

function App() {
  return (
    <>
      <NavBar />
      <main className="container">
        <Switch>
          <Route path="/movies/:id" component={MovieForm} />
          <Route path="/movies" component={Movies}></Route>
          <Route path="/customers" component={Customers}></Route>
          <Route path="/rentals" component={Rentals}></Route>
          <Route path="/not-found" component={NotFound}></Route>
          <Redirect from="/" exact to="/movies" />
          <Redirect to="not-found" />
        </Switch>
      </main>
    </>
  );
}

export default App;

movieForm.jsx

import React from "react";

const MovieForm = ({ match, history }) => {
    // return <h1>Movie Form {match.params.id}</h1>;
    return (
        <div>
            <h1>
                Movie Form {match.params.id}
            </h1>
            <button className="btn btn-primary" onClick={() => history.push('/movies')}>
                Save
            </button>
        </div>
    )
};

export default MovieForm;

movieTable.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Table from './Common/Table';
import Like from './Common/Like';

// const x = <Like></Like>;


class MoviesTable extends Component {
    columns = [
        { path: 'title', 
          label: 'Title', 
          content: movie => <Link to={`/movies/${movie._id}`}>{movie.title}</Link> 
        },
        { path: 'genre.name', label: 'Genre' },
        { path: 'numberInStock', label: 'Stock' },
        { path: 'dailyRentalRate', label: 'Rate' },
        { key: "like",
          content: movie => <Like liked={movie.liked} onClick={() => this.props.onLike(movie)} />
        },
        { key: "delete",
          content: movie => (
            <button 
                onClick={() => this.props.onDelete(movie)}
                className="btn btn-danger btn-sm">
                Delete
            </button>
          )
            
        }
    ]
    
    render(){
        const { movies, onSort, sortColumn } = this.props;

        return (
            <Table 
                columns={this.columns} 
                data={movies}
                sortColumn={sortColumn}
                onSort={onSort}
            />
        )
    }
}

export default MoviesTable

GitHub - rajifmahendra/React-js-component at routingGitHub