اموزش React Router

React.js یک از مشهور ترین و دوست‌داشتنی ترین library ها در میان توسعه دهندگان جاواسکریپت هست. Routing یکی از کارهای مهم در این library میباشد که جابه جایی بین صفحات را انجام میدهد امروز سعی میکنیم به آن میپردازیم. البته یادتان باشد نحوه ایجاد ریکت در پست ایجاد اپلیکیشن ریکت توسط دستور create-react-app توضیح داده شده است پس از این به بعد تمام این مراحل در این Directory انجام میشود.

قدم ۱:‌ ساختن یک Component در App.js

قبل از شروع با استفاده از yarn add react-router-dom یا npm install react-router-dom را به پکیج هایمان اضافه میکنیم

در دایرکتوری src درون فایل App.js یک Component بسازید. و کد های زیر را درون آن قرار دهید.

// App.js

import React, { Component } from 'react';

class App extends Component {
render() {
return (
<div>
<h2>Welcome to React Router Tutorial</h2>
</div>
);
}
}

export default App;

حالا در index.js کد های زیر را قرار دهیدکه البته به صورت پیشفرض این کد ها وجود دارد.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

The Router

BrowserRouter

اگر میخواهیم جابه جایی بین صفحات داینامیک داشته باشیم کافی است از BrowserRouter استفاده کنیم. برای مثال به کد های زیر دقت کنید.

// index.js

import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))

در قسمت بعد ما به کامل کردن کامپوننت App میپردازیم. که اگر به طور خلاصه بگوییم مثلاً ما سه تا صفحه داریم Home.js, About.js و Contact.js که در داخل هر کدام کامپوننتی با همان نام میسازیم.

قدم۲:‌ ساختن سه کامپوننت

دایرکتوری با نام components در src میسازیم و سه فایل Home.js, About.js و Contact.js را میسازیم و به شکل زیر کد های زیر را درون آن قرار میدهیم

// Home.js

import React, { Component } from 'react';

class Home extends Component {
render() {
return (
<div>
<h2>Home</h2>
</div>
);
}
}

export default Home;

دوم فایل About.js را میسازیم

// About.js

import React, { Component } from 'react';

class About extends Component {
render() {
return (
<div>
<h2>About</h2>
</div>
);
}
}

export default About;

سوم فایل Component.js را میسازیم

// Contact.js

import React, { Component } from 'react';

class Contact extends Component {
render() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
}

export default Contact;

قدم۳:‌ Rout ها را در App.js رجیستر میکنیم.

// App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
render() {
return (
<Router>
<div>
<h2>Welcome to React Router Tutorial</h2>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<ul className="navbar-nav mr-auto">
<li><Link to={'/'} > Home </Link></li>
<li><Link to={'/contact'} >Contact</Link></li>
<li><Link to={'/about'} >About</Link></li>
</ul>
</nav>
<hr />
<Switch>
<Route exact path='/' component={Home} exact />
<Route path='/contact' component={Contact} />
<Route path='/about' component={About} />
</Switch>
</div>
</Router>
);
}
}

export default App;

کلمه exact مشخص میکند که دقیقا همین مسیر باشد و در آخر فایل index.js به این صورت مینویسیم.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

اما یادتون باشه این فقط یک مقدمه کوتاه بر Router ها بود و در پست های بعد به router ها به طور کامل‌تر میپردازیم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *