آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

روتر Router در ReactJS

دوره های مرتبط با این مقاله

روتر(Router) در ReactJS

در این بخش می خواهیم به چگونگی تنظیم مسیریابی در برنامه بپردازیم.


مرحله 1- نصب یک ReactJS روتر

ساده ترین راه برای نصب ReactJS روتر اجرای تکه کد زیر در پنجره ی cmd است.

C:\Users\username\Desktop\reactApp>npm install react-router

مرحله 2- ایجاد اجزا در React

در این مرحله 4 جزء را ایجاد خواهیم کرد. از جزء App به عنوان یک منوی تب استفاده خواهیم کرد. 3 جزء دیگر (Home) ، (About) و (Contact) بعد از تغییر مسیر رندر خواهند شد.
main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
   render() {
      return (
         < div >
            < ul >
            < li >Home< /li >
            < li >About< /li >
            < li >Contact< /li >
            < /ul >
            {this.props.children}
         < /div >
      )
   }
}
export default App;
class Home extends React.Component {
   render() {
      return (
         < div >
            < h1 >Home...< /h1 >
         < /div >
      )
   }
}
export default Home;
class About extends React.Component {
   render() {
      return (
         < div >
            < h1 >About...< /h1 >
         < /div >
      )
   }
}
export default About;
class Contact extends React.Component {
   render() {
      return (
         < div >
            < h1 >Contact...< /h1 >
         < /div >
      )
   }
}
export default Contact;

مرحله 3 – اضافه کردن روتر در ReactJS

حالا مسیرهایی را به برنامه اضافه می کنیم. به جای رندر کردن عنصر App مانند مثال قبل، این بار روتر رندر خواهد شد. همچنین برای هر یک از مسیرها اجزایی را تنظیم می کنیم.
main.js

ReactDOM.render((
   < Router history = {browserHistory} >
      < Route path = "/" component = {App} >
         < IndexRoute component = {Home} / >
         < Route path = "home" component = {Home} / >
         < Route path = "about" component = {About} / >
         < Route path = "contact" component = {Contact} / >
      < /Route >
   < /Router >
), document.getElementById('app'))

پس از باز شدن برنامه 3 لینک قابل کلیک ظاهر می شوند که از طریق آن ها می توانیم تغییر مسیر دهیم.


روتر(Router) در ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 96
  •    84
  • تاریخ ارسال :   1397/10/19

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .