دورة REACT JS للمبتدئين الدرس الثاني عشر
فهاد الدرس الثاني عشر من دورة react js للمبتدئين غادي نشوفوا حاجة مهمة ف react js هي routes لي كيمكننا من اننا نتنقلوا ما بين الصفحات ديالنا.
1- إضافة les routes ل application ديالنا
///
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
//
import React from 'react';
import {Link} from 'react-router-dom';
const Articles = () => {
return(
<div>
Articles
<Link to="/">
Accueil
</Link>
</div>
);
};
export default Articles;
3- إضافة الصفحة الرئيسية
///
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 للتنقل بين الصفحات
//
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'));