Routes is giving a warning message in react?

Question

I have a problem like this. I am making a react application. There I have written routs like this.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {
            BrowserRouter as Router,
            Route
          } from 'react-router-dom'
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import Signup from './components/Signup';
    import Officerreg from './components/Officerreg';
    import OffenceAdd from './components/OffenceAdd';
    import Dofine from './components/Dofine';
    import Payfine from './components/Payfine';
    import Drivers from './components/Drivers';
    import DriversShow from './components/DriversShow';

    ReactDOM.render(
        
          
          
          
          
          
          
          
          
        
    , document.getElementById('root'));
    registerServiceWorker();

I have used those routes in my Header.js file like this.

import React,{ Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { Link } from "react-router-dom";
// import App from '../App';
//
// import './Header.scss';

import web3 from '../ethereum/web3';
import trafficfine from '../ethereum/trafficfine';
import factory from '../ethereum/factory';


export default class Header extends Component {
    state = {
      activeItem: '',
      Officer: false,
      driver: false
    }

    async componentDidMount(){
      const accounts = await web3.eth.getAccounts();

      const isofficer = await trafficfine.methods.checkOfficer(accounts[0]).call();

      const isdriver = await factory.methods.checkDriver(accounts[0]).call();

      this.setState({Officer:isofficer,driver:isdriver});
    }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  render(){
    const { activeItem,Officer,driver } = this.state;
    let show;
    return(
        
      
      
        

        
        Home
        

        
        Add Officer
        

        
        Add Offence
        

        
        Do Fine
        

        
        Pay Fine
        

        
        Drivers
        

        
          
          Sign Up
          
        
      
    );
  }
};

I have use header in my App.js file like this.

import React, { Component } from 'react';
import './App.css';
import Layout from './components/Layout';
import Header from './components/Header';
import trafficfine from './ethereum/trafficfine';
import { Card, Grid} from 'semantic-ui-react';
// import web3 from './ethereum/web3';


class App extends Component {

  state={
    numberofDrivers: '',
    numberofOfficers: '',
    numberofOffencers: '',
    fineAmmount: 0
  }

  async componentDidMount(){
    // const accounts = await web3.eth.getAccounts();

    const summury = await trafficfine.methods.getSummary().call();

    this.setState({numberofDrivers:summury[0],numberofOfficers:summury[1],numberofOffencers:summury[2],fineAmmount:summury[3]});
  }

  render() {
    const{
      numberofDrivers,
      numberofOffencers,
      numberofOfficers,
      fineAmmount
    }=this.state;

    return (
      
      
      
        
          
            
            
            
              
              
                
                  
                    
                      Number Of Drivers
                    
                    
                    
                    
                    
                    
                        {numberofDrivers}
                    
                    
                  
                
                
                  
                    This number of drivers priviladged to use app
                  
                
              
              
                
                  
                    
                      Number Of Officers
                    
                    
                    
                    
                    
                    
                        {numberofOfficers}
                    
                    
                  
                
                
                  
                    This is number of Officers authorized to take action
                  
                
              
              
                
                  
                    
                      Number Of Offencers
                    
                    
                    
                    
                    
                    
                        {numberofOffencers}
                    
                    
                  
                
                
                  
                    This Number of offences have been powered
                  
                
              
              
                
                  
                    
                      Fine Ammount 
                    
                    
                    
                    
                    
                    
                        {fineAmmount}
                    
                    
                  
                
                
                  
                    This is the Total fine amount
                  
                
              
              
              
            
          
        

      
      
    );
  }
}

export default App;

When I am routing through the menu it is giving me and warning on the Console like this.

Warning: validateDOMNesting(...):  cannot appear as a descendant of .
    in a (created by Link)
    in Link (at Header.js:61)
    in a (created by MenuItem)
    in MenuItem (at Header.js:60)
    in div (created by Menu)
    in Menu (at Header.js:35)
    in Header (at Dofine.js:54)
    in div (at Dofine.js:53)
    in Unknown (created by SideEffect(Component))
    in SideEffect(Component) (at Dofine.js:52)
    in Dofine (created by Route)
    in Route (at src/index.js:24)
    in div (at src/index.js:19)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:18)

I searched lot a lot to find a solution for this problem but I was unable to get nothing done by them. If someone can help me to find a solution to this problem it is very grateful.Thank You!

devserkan · Accepted Answer

This is not an error but a warning. It occurs because you are trying to render a Link component from React Router in the Menu.Item from semantic-ui-react. They are both compiled into a in the DOM, so an a element can't be descendant of another a element.

Try this in your Menu.Items:


  Home

But, I am not sure about the onClick part, since you want to use the menu item as a link, it should go to the desired URL when you click. So, what will handleClick do in this situation?

See the Augmentation part of the documentation. It is on the main page.

Routes is giving a warning message in react?

Answers (1)

Related Questions