روتر 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 لینک قابل کلیک ظاهر می شوند که از طریق آن ها می توانیم تغییر مسیر دهیم.

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