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


فهاد الدرس الثاني عشر من دورة  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'));