React router kullanımı

React router kullanımını basitçe göstereceğim.

1. Npm üzerinden kurulumu yapalım

npm install react-router-dom 

2. App.js ‘e   import edelim

import {BrowserRouter , Router, Route} from "react-router-dom";

3.  <Router> etiketi açarak başlıyoruz. Exact özelliği sadece bu path’ de çalış gibi bir şey demek. İlk Route ‘da props olduğu için öyle yazdık. Hem propslu componente örnek olmuş olur.

  render() {
  return (
    <div className="container">
         <Navbar title="User App 1" />
         <hr/>
         <Router>
             <Route exact path='/' component={() => <Users users={this.state.users} />} />
             <Route exact path='/add' component={AddUser} />
         </Router>



    </div>
  );
}

Nasıl çalıştığını açıklayayım .Url sonuna hiç bir şey yazmazsanız yada / yazarsanız users componentini çağıracak sadece onlar gözükecek. Navbar hepsinde gözüküyor çünkü Router içinde değil.  http://localhost:3001/add yazarsak ta  Adduser componenti çağrılacak.

4. Link verelim birde. Linke tıklayınca add componentimize gitsin http://localhost:3001/add yoluna gitsin.

Linki kullanacağımız sayfada bunu çağırmamız gerekiyor.

import {Link} from 'react-router-dom'
<Link to="add">Add </Link>

React router kullanımı genel olarak bu şekildedir.

 

Bir cevap yazın