بخش های اصلی

آموزش ReactJS

ReactJS – Router

در این بخش نحوه ی انجام مسیریابی (routing) برای برنامه را توضیح میدیم.

مرحله ی 1 – نصبِ React Router

یک راه آسان برای نصبِ react-router اینه که قطعه کد زیر را در پنجره اعلان فرمان (command prompt) اجرا کنیم.

C:UsersusernameDesktopreactApp>npm install react-router

مرحله 2 – ایجاد کامپوننت ها

در این مرحله چهار کامپوننت ایجاد می کنیم. کامپوننتِ App مثل یک tab menu (زبانه) استفاده میشه. سه کامپوننت دیگه، (Home)، (About) و (Content) وقتی که مسیر (route) تغییر کنه، رِندِر میشن.

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 – اضافه کردنِ Router

حالا می خوایم مسیرها (routes) را به برنامه اضافه کنیم. این بار بجای رِندِر کردن عنصرِ App مثل مثال های قبلی، Router رِندِر میشه. همچنین برای هر مسیر (route)، کامپوننت ها را هم تعریف می کنیم.

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'))

وقتی برنامه اجرا بشه، سه لینک قابل کلیک کردن در خروجی ظاهر میشه که از آن ها برای تغییر مسیر (route) استفاده میشه.

 

react router example

 

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد