Разворачивание интерфейсов в приложении на React

НАВИГАЦИЯ

src\modules\Navigation

папка, где складываются все файлы, связанные с навигацией на сайте

src\modules\Navigation\Navbar.js
в этом файле разворачивается навигация

import React from 'react'

const Navbar = () =>{
 return (
 <div>Navbar</div>
)
}
export default Navbar

• import импортирование и подстановка компонента Navbar

src\modules\Navigation\Navbar.js

import Navbar from './../../modules/Navigation/Navbar';
...
const Courses = () =>{
 return (
 <div className={classes.main}>
 <div className={classes.main_navigation}>
 <Navbar/>
</div>
 ...
</div>
)
}
...

• в Navbar разворачивание роутинга внутри приложения
• сделаем свой класс для Navbar (пример classes.navigation)

Link
позволяют переходить, осуществлять роутинг внутри приложения
to
атрибут, куда пользователь будет переходить, когда будет нажимать (пример courses,shop,news)

import React from 'react'
import {Link} from 'react-router-dom';
import classes from './../../style.module.scss';

const Navbar = () =>{
 return (
 <div className={classes.navigation}>

 <div>
  <Link to="/courses">Мои курсы</Link>
 </div>

 <div>
  <Link to="/shop">Магазин</Link>
 </div>

 <div>
  <Link to="/news">Новости</Link>
 </div>

</div>
)
}
export default Navbar