CONTEXTAPI ROUTER EKLİ UPDATE YOK
DB.JSON
{
“users”: [
{
“id”: “1a”,
“name”: “Musa”,
“salary”: “9000”,
“department”: “BT”
},
{
“id”: “2a”,
“name”: “Burak”,
“salary”: “5000”,
“department”: “ARGE”
},
{
“id”: “3a”,
“name”: “Talha”,
“salary”: “6000”,
“department”: “İŞLETME”
},
{
“id”: “4a”,
“name”: “Mehmet”,
“salary”: “5000”,
“department”: “MUHASEBE”
},
{
“id”: “5a”,
“name”: “Ramazan”,
“salary”: “8000”,
“department”: “FİNANS”
}
]
}
APP.JS
import React, { Component } from ‘react’
import Users from ‘./components/Users’
import Navbar from ‘./layout/Navbar’
import AddUser from ‘./components/AddUser’
import “./App.css”
//import Test from ‘./components/Test’
import NotFound from ‘./pages/NotFound’
import {BrowserRouter as Router, Route, Switch} from “react-router-dom”
const About =() =>{
return (
<h3>About Page</h3>
)
}
class App extends Component {
// <Test test = “deneme testi” />
//
// <hr />
// <AddUser/>
// <Users/>
render() {
return (
<Router>
<div className=”container”>
<Navbar title=”User App” /> {/* Her zaman sayfanın üstünde olacağı için Router içine almıyoruz. */}
<Switch>
<Route exact path =”/” component={Users}/>
<Route exact path =”/add” component ={AddUser}/>
<Route exact component ={NotFound}/>
</Switch>
</div>
</Router>
)
}
}
export default App;
NOTFOUND.JS
import React from ‘react’
function NotFound() {
return (
<div>
<h3>Sayfa Bulunamadı</h3>
</div>
)
}
export default NotFound;
NAVBAR.JS
import React from ‘react’;
import Proptypes from ‘prop-types’;
import {Link} from “react-router-dom”
const Navbar = (props) => {
return (
<div>
<h3>{props.title}</h3>
<ul>
<li>
<Link to =”/”>Kullanıcılar</Link>
</li>
<li>
<Link to =”/add”>Kullanıcı Ekle</Link>
</li>
</ul>
</div>
)
}
Navbar.propTypes = {
title: Proptypes.string.isRequired
}
Navbar.defaultProps ={
title:”Default App”
}
export default Navbar;
DİĞER DOSYALAR ÖNCEKİ STORY İLE AYNI
