-1

Boa tarde, estou com uma duvida de iniciante gostaria de saber se alguem pode me ajudar a duvida é o seguinte preciso passar o active que for selecionado no NavBar.js para Home.js para poder renderizar o componente conforme o usuario clica no menu mostrar o component certo mais nao estou conseguindo.

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>
      )
    }

  }

1 Resposta 1

1

Você esta usando a biblioteca 'react-router-dom' essa biblioteca já disponibiliza uma função que faz isso tudo que você esta querendo, é a função <Link to={path_da_rota}>Link</Link> segue a documentação dessa função Link da documentação, ela é responsável pela navegação da sua aplicação, como você pode ver no exemplo que eles disponibilizam: Exemplo de navegação

No seu NavBar abaixo perceba que englobamos o component <Link /> em volta do texto que for clicável

O seu NavBar.js ficaria:


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>
      )
    }
  }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .