آموزش ReactJS – فصل سیزدهم: مسیر دهی (Routing)

در این مطلب در سه گام خواهید آموخت که چگونه می توانید یک اپلیکیشن تحت وب چند صفحه ای با ری اکت بسازید.

گام اول: نصب React Router

اولین گام این است که ماژول react-router را از طریق npm بر روی پروژه خود نصب کنید. برای انجام این کار، صفحه ترمینال یا CMD را باز کرده، به پوشه پروژه cd کنید و سپس کد زیر را اجرا کنید:

npm install react-router

همچنین شما باید ماژول react-router-dom را نیز نصب کنید. پس دستور زیر را تایپ کرده و اینتر بزنید:

npm install react-router-dom

گام دوم: ساخت کامپوننت ها

پس از نصب ماژول روتر، اکنون ما چهار کامپوننت ایجاد خواهیم کرد که برای نمایش هر صفحه استفاده خواهند شد.

کد زیر را درون فایل index.js کپی کنید:

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

export default {App, Home, Contact, About};

فصل 13 – مثال 1 (فایل index.js)

گام سوم: تنظیمات مسیر دهی ری اکت

کد زیر را به آخر فایل index.js اضافه کنید تا روتر شروع به کار کند:

ReactDOM.render((
	<BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route exact path='/about' component={About}/>
        <Route exact path='/contact' component={Contact}/>
      </Switch>
    </App>
  </BrowserRouter>
), document.getElementById('root'))

فصل 13 – مثال 1 (ادامه فایل index.js)

در نهایت فایل index.js شما حاوی این کد ها خواهد بود:

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

export default {App, Home, Contact, About};

ReactDOM.render((
	<BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route exact path='/about' component={About}/>
        <Route exact path='/contact' component={Contact}/>
      </Switch>
    </App>
  </BrowserRouter>
), document.getElementById('root'))

فصل 13- مثال 1 (فایل نهایی index.js)

بعد از اجرای پروژه، آدرس اصلی را که باز کنید یک صفحه با منو بندی مشاهده خواهید کرد که با کلیک بر روی هر آیتم منو، صفحه مربوط به استفاده از کامپوننت ها به نمایش در خواهد آمد. چیزی شبیه تصویر زیر: