React Router
Instalasi React Router
 |
| Instalasi React Router logs. |
Import Router
import {BrowserRouter} from 'react-router-dom';
+src/index.js
...
import {BrowserRouter} from 'react-router-dom';
...
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>
, document.getElementById('root'));
+src/components/Main/index.js
import React from 'react';
import {Switch, Route} from 'react-router-dom';
import Series from '../../containers/Series';
const Main = props => (
<Switch>
<Route exact path="/" component={Series}></Route>
</Switch>
)
export default Main;
+src/components/App/index.js
class App extends Component {
render() {
return (
<div className="App">
<Main/>
</div>
);
}
}
+Hasilnya Masih Sama
Konfigurasi Router
Mari kita buat halaman untuk menampilkan single series (ada list ada single page).
Buat src/containers/SingleSeries/index.js
+src/components/Main/index.js
+Import Main File ke src/components/App/index.js
//src/components/App/index.js
import Main from '../Main';
//const Intro = (props) => <p className="App-indtro">Test aja kawanku!</p>;
class App extends Component {
render() {
return (
<div className="App">
<Main/>
</div>
);
}
}
+Hasil di Browser (Params)
Menggunakan Route Params
+Buka src/components/SeriesList/index.js
 |
| src/components/SeriesList/index.js |
+Import Link
import {Link} from 'react-router-dom';
+Gunakan Link di list
const SeriesListItem = ({series}) => (
<li key={series.show.id}>
<Link to={`/series/${series.show.id}`}>
{series.show.name}
</Link>
</li>
)
+Perubahan src/components/SeriesList/index.js
import React from 'react';
import './index.css';
import {Link} from 'react-router-dom';
const SeriesListItem = ({series}) => (
<li key={series.show.id}>
<Link to={`/series/${series.show.id}`}>
{series.show.name}
</Link>
</li>
)
const SeriesList = (props) => {
return (
<div>
<ul className="series-list">
{props.list.map(series => (
<SeriesListItem series={series} key={series.show.id}/>
))}
</ul>
</div>
)
}
export default SeriesList;
+Hasil Perubahan di Browser
Request di SingleSeries
import React, {Component} from 'react';
import Loader from '../../components/Loader';
class SingleSeries extends Component {
state = {
series: null,
isFetching: true
}
// dipanggil otomatis saat component dimount
componentDidMount() {
const { id } = this.props.match.params;
fetch(`http://api.tvmaze.com/shows/${id}?embed=episodes`).then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
this.setState({series: json, isFetching: false});
});
}
render(){
const {series, isFetching} = this.state;
console.log(series);
return (
<div>
<p>Single Series untuk ID: {this.props.match.params.id} </p>
{isFetching && <Loader/>}
{series!=null && 'Judul: ' + series.name}
</div>
)
}
}
export default SingleSeries;
+Hasil di Browser
Sumber
Comments
Post a Comment