موجه ReactJS

في هذا الفصل، سنتعلم كيفية ضبط المسارات للإعدادات

الخطوة الأولى-تركيب مكتبة React Router

طريقة بسيطة للتركيبreact-routerهيcommand promptأ 运ع الجملة التالية في النافذة.

C:\Users\اسم المستخدم\Desktop\reactApp> npm install react-router

الخطوة الثانية-إنشاء المكونات

في هذه الخطوة، سنقوم بإنشاء أربعة مكونات. الAppالمكونات هذه ستُستخدم كمساحة القوائم التعاقبية. بعد تغيير الطريق(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;

الخطوة الثالثة-إضافة موجه

الآن، سنضيف مسارات التطبيق. هذه المرة سنقوم بتقديم، وليسAppتقديم العناصر كما في المثال السابقRouterنحن سنقوم أيضًا بتعيين مكونات لكل مسار.

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

عند بدء التطبيق، سنرى ثلاثة روابط قابلة للنقر يمكن استخدامها لتغيير المسار.