Маршрутизация в React Js?

Question

import React, { Component } from 'react'
import WebFooter from './WebFooter'
import Navbar from './Navbar'
import FrontImage from './FrontImage'
import './App.css'
import OurServices from './OurServices'
import ContactUs from './ContactUs'
import OurTeam from './OurTeam'

export default class App extends Component {
  render() {
    return (
     <div class='bgimg'>

       <Navbar/>
        <FrontImage/> 
        <OurServices/>

        <OurTeam />
        <ContactUs/>
        <WebFooter/> 
      </div>
    )
  }
}

Это мое приложение. js файл. В компоненте навигационной панели у меня есть логин, регистрация и кнопка домой. Когда я нажал «Войти», страница должна перейти на другую страницу, которая содержит панель навигации и форму входа, но не содержит других компонентов, таких как наша команда, свяжитесь с нами

Answer 1

Вы должны использовать BrowserRouter, Route from response-router-dom.

Наконец, ваше приложение. js будет примерно таким

return (
<BrowserRouter>
   <Navbar />
   <Route exact path="/login" component={Login} />
   <Route exact path="/services" component={OurServices} />
   <WebFooter/> 
>
</BrowserRouter>
)

Затем в Navbar вы должны добавить ссылки Войти в Навбар. Самый простой способ - использовать перехватчик useHistory из react-router-dom. Тогда pu sh как history.pu sh ('/ login')

Спросите меня, если у вас возникнут вопросы