Reactjs props for others

Question

Good afternoon, am with a beginner question I would like to know if anyone can help me doubt is the following need to pass the active that is selected in Navbar.js for Home.js to be able to render the component as the user clicks the menu show the right Component but I’m not sure I am succeeding.

App.js

import React, { Component } from 'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom' import Cadastro from './Pages/Cadastro/Cadastro' import Error404 from './Pages/Error404/Error404' import Login from './Pages/Login/Login' import Home from './Pages/Home/Home' import { render } from '@testing-library/react'; // import { Container } from './styles';

export default class App extends Component {   render() {
    return <BrowserRouter>
    <Switch>
        <Route path="/" exact={true} component={Login}/>
        <Route path="/home" render={(props)=><Home {...props} active={this.props.activeItem} />} />

        <Route path="/cadastro" component={Cadastro} />
        <Route path='*' component={Error404} />

    </Switch> </ BrowserRouter>;   } }

Home js.

import React, { Component } from 'react';
// import { Container } from './styles';

import NavBar from '../../Components/Nav/NavBar'
import Error404 from '../Error404/Error404'
import CadPacientes from '../../Components/CadPacientes/CadPacientes'


export default class Home extends Component {
  render() {
    if(!localStorage.getItem('user') ){

      return <Error404 />
    }else{
      return (<div><NavBar />  <CadPacientes /></div>)
    }

  }
}

Navbar.js

import React, { Component } from 'react';
import { Icon, Menu } from 'semantic-ui-react'

export default class NavBar extends Component {
  constructor(props){
    super(props)
    this.state={
      activeItem: 'gamepad'
    }

  }
  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  render() {

    const { activeItem } = this.state

      return(
        <Menu compact icon='labeled'>
        <Menu.Item
          name='gamepad'
          active={activeItem === 'gamepad'}
          onClick={this.handleItemClick}
        >
          <Icon name='home' />
          Cadastro de Pacientes
        </Menu.Item>

        <Menu.Item
          name='cadastro paciente'
          active={activeItem === 'cadastro paciente'}
          onClick={this.handleItemClick}
        >
          <Icon name='user' />
          Visualização
        </Menu.Item>

        <Menu.Item
          name='video play'
          active={activeItem === 'video play'}
          onClick={this.handleItemClick}
        >
          <Icon name='video play' />
          Sair
        </Menu.Item>
      </Menu>
      )
    }

  }

Answer 1

You are using the library 'React-router-dom' that library already provides a function that does this all you want, is the function <Link to={path_da_rota}>Link</Link> follows the documentation of that function Documentation link, is responsible for navigating your application, as you can see in the example they provide: Example of navigation

In your Navbar below note that we include the <Link /> around the text that is clickable

Your Navbar.js would stay:

import React, { Component } from 'react';
import { Icon, Menu } from 'semantic-ui-react'
import {
  Link
} from 'react-router-dom';

export default class NavBar extends Component {
  constructor(props){
    super(props)
    this.state={
      activeItem: 'gamepad'
    }

  }
  render() {

    const { activeItem } = this.state

      return(
        <Menu compact icon='labeled'>
        <Menu.Item
          name='gamepad'
          active={activeItem === 'gamepad'}
        >
            <Link to='/cadastro'>
              <Icon name='home' />
              Cadastro de Pacientes
            </Link>
        </Menu.Item>

        <Menu.Item
          name='cadastro paciente'
          active={activeItem === 'cadastro paciente'}
        >
          <Link to='/cadastro'>
            <Icon name='user' />
            Visualização
          </Link>

        </Menu.Item>

        <Menu.Item
          name='video play'
          active={activeItem === 'video play'}
        >
          <Link to='/'>
            <Icon name='video play' />
            Sair
          </Link>
        </Menu.Item>
      </Menu>
      )
    }
  }