دورة REACT JS للمبتدئين الدرس الثاني عشر

منذ 5 سنوات imadbelasri Reactjs
RS

فهاد الدرس الثاني عشر من دورة  react js للمبتدئين غادي نشوفوا حاجة مهمة ف react js هي routes لي كيمكننا من اننا نتنقلوا ما بين الصفحات ديالنا.



1- إضافة les routes ل application ديالنا

أول حاجة غادي تزيد application جديدة سميها كيف بغيتي فباش نخدم ب les routes ضروري ما ن installer واحد ل package غادي نمشي ل cmd وندير ل commande :

npm install --save   react-router-dom

من بعد مايتزاد غادي نزيد fichier ف src نسميه route.js فيه غادي نزيد les routes ديالي.

أول حاجة كنسترجع Route و Switch من react-router-dom  منبعد كنخدم بهم ف Switch بحال switch لي كنخدم بها باش كن tester و Route كتمكني من إضافة les routes.

فكنزيد route / لي كيدي للصفحة الرئيسية و route /articles لي كيدي للصفحة articles.js لي غادي نزيدها من بعد.

الكود لي زدنا ف route.js هو :

                                                    
                                                        ///
import React, {Component } from 'react';
import {Route,Switch} from 'react-router-dom';
import Articles from './components/articles';
import Home from './components/home';

class Routes extends Component{
    render(){
        return(
            <Switch>
                <Route path="/" exact component={Home}/>
                <Route path="/articles" exact component={Articles}/>
            </Switch>
        )
    }
}

export default Routes;
                                                    
                                                

2- إضافة الصفحة الخاصة ب les articles

ف components غادي نزيد ملف جديد سميه articles.js فيه كنزيد فقط texte و رابط زدناه ب Link لي كنسترجعوه من react-router-dom ولي كيمكن من إضافة الروابط.

فالرابط لي زدت فاش نضغط عليه كيديني للصفحة الرئيسية كيف كنشوف فالصورة :



الكود لي زدنا ف articles.js هو :

                                                        
                                                            //
import React from 'react';
import {Link} from 'react-router-dom';

const Articles = () => {
    return(
        <div>
            Articles
            <Link to="/">
                Accueil
            </Link>
        </div>
    );
};

export default Articles;
                                                        
                                                    

3- إضافة الصفحة الرئيسية

ف components غادي نزيد ملف جديد سميه home.js فيه كنزيد
روابط لي كيديو للصفحة الرئيسية ول articles كيف كنشوف فالصورة :

الكود لي زدنا ف home.js هو :

                                                        
                                                            ///
import React from 'react';
import {Link} from 'react-router-dom';

const Home = () => {
    return(
        <div style={{
            display: 'flex'
        }}>
            <Link to="/">
                Accueil
            </Link>

            |

            <Link to="/articles">
                Articles
            </Link>
        </div>
    );
};

export default Home;
                                                        
                                                    

4- استخدام ل BrowserRouter للتنقل بين الصفحات

فباش نتنقل بين الصفحات لا بد ما نخدم بل BrowserRouter لي كيمكن من التنقل بين الصفحات ف index.js  كنسترجعوه من react-router-dom من بعد كنسترجع ل component Routes من الملف route.js وكنزيدو وسط ل BrowserRouter.
فدبا يلا درتي npm start ومشيتي للمتصفح غادي تلقى النتيجة لي شفنا فالصور السابقة.

فالكود لي غادي نزيدو ف index.js هو :

                                                        
                                                            //
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from './route';

class  App extends Component {
    render(){
        return(
            <div className="container">
                <BrowserRouter>
                    <Routes/>
                </BrowserRouter>
            </div>
        )
    }
};

ReactDOM.render(<App/>,document.querySelector('#root'));
                                                        
                                                    

دروس ذات صلة

RS

دورة react js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت...


RS

دورة react js للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les foncti...


RS

دورة react js للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف E...


RS

دورة react js للمبتدئين الدرس الرابع

فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet...


RS

دورة react js للمبتدئين الدرس الخامس

فهاد الدرس الخامس من دورة react js غادي نشوفوا كيفاش نزيدو component آخر ومنبعد غادي نشوفوا كيفاش نع...


RS

دورة react js للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات...


RS

دورة REACT JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو مجموعة ديال الاخبار ف state ومن...


RS

دورة react js للمبتدئين الدرس العاشر

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالد...


RS

دورة react js للمبتدئين الدرس الحادي عشر

فهاد الدرس الحادي عشر من دورة react js للمبتدئين غادي نشوفوا كيفاش نستعملوا axios باش نسترجعوا les a...


RS

دورة react js للمبتدئين الدرس الثالت عشر

فهاد الدرس الجديد من دورة react js للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les formulaires ف react js...