时间戳

首页 > 解决方案 > 路线在反应中给出警告信息？

reactjs - 路线在反应中给出警告信息？

问题描述

我有这样的问题。我正在制作一个反应应用程序。我在那里写过这样的路线。

    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(<Router>
        <div>
          <Route exact path="/" component={App} />
          <Route path="/signup" component={Signup} />
          <Route path="/addofficer" component={Officerreg}/>
          <Route path="/addoffence" component={OffenceAdd}/>
          <Route path="/dofine" component={Dofine}/>
          <Route path="/payfine" component={Payfine}/>
          <Route path="/drivers" component={Drivers}/>
          <Route path="/drivershow/:address" component={DriversShow}/>
        </div>
    </Router>, document.getElementById('root'));
    registerServiceWorker();

我已经像这样在我的 Header.js 文件中使用了这些路由。

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(
        <Menu style={{ color:'#ffffff',height:'60px'}}>
      <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
      <img src="../favicon.png" style={{maxHeight:'500px'}} alt="logo"></img>
        </Menu.Item>

        <Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick}>
        <Link to="/">Home</Link>
        </Menu.Item>

        <Menu.Item name='addofficer' active={activeItem === 'addofficer'} onClick={this.handleItemClick}>
        <Link to="/addofficer">Add Officer</Link>
        </Menu.Item>

        <Menu.Item name='addoffence' active={activeItem === 'addoffence'} onClick={this.handleItemClick}>
        <Link to="/addoffence">Add Offence</Link>
        </Menu.Item>

        <Menu.Item name='dofine' active={activeItem === 'dofine'} onClick={this.handleItemClick} >
        <Link to="/dofine">Do Fine</Link>
        </Menu.Item>

        <Menu.Item name='payfine' active={activeItem === 'payfine'} onClick={this.handleItemClick} >
        <Link to="/payfine">Pay Fine</Link>
        </Menu.Item>

        <Menu.Item name='drivers' active={activeItem === 'drivers'} onClick={this.handleItemClick} >
        <Link to="/drivers">Drivers</Link>
        </Menu.Item>

        <Menu.Menu position='right'>
          <Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
          <Link to="/signup">Sign Up</Link>
          </Menu.Item>
        </Menu.Menu>
      </Menu>
    );
  }
};

我在我的 App.js 文件中使用了这样的标头。

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 (
      <div className="App">
      <Header></Header>
      <Layout>
        <Grid>
          <Grid.Row>
            <Grid.Column width={2}></Grid.Column>
            <Grid.Column width={12}>
            <Grid.Row>
              <Card.Group>
              <Card style={{background:'#B2EBF2',width:'400px'}}>
                <Card.Header>
                  <Grid>
                    <Grid.Column width={12}>
                      <h2 style={{paddingTop:'20px'}}>Number Of Drivers</h2>
                    </Grid.Column>
                    <Grid.Row>
                    <Grid.Column width={8}>
                    <img src="./driver.png" alt="driver" style={{maxHeight:'100px'}}></img>
                    </Grid.Column>
                    <Grid.Column width={4}>
                        <h2>{numberofDrivers}</h2>
                    </Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Card.Header>
                <Card.Content>
                  <Card.Description>
                    This number of drivers priviladged to use app
                  </Card.Description>
                </Card.Content>
              </Card>
              <Card style={{background:'#00BCD4',width:'400px'}}>
                <Card.Header>
                  <Grid>
                    <Grid.Column width={12}>
                      <h2 style={{paddingTop:'20px'}}>Number Of Officers</h2>
                    </Grid.Column>
                    <Grid.Row>
                    <Grid.Column width={8}>
                    <img src="./officer.png" alt="driver" style={{maxHeight:'100px'}}></img>
                    </Grid.Column>
                    <Grid.Column width={4}>
                        <h2>{numberofOfficers}</h2>
                    </Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Card.Header>
                <Card.Content>
                  <Card.Description>
                    This is number of Officers authorized to take action
                  </Card.Description>
                </Card.Content>
              </Card>
              <Card style={{background:'#D1C4E9',width:'400px'}}>
                <Card.Header>
                  <Grid>
                    <Grid.Column width={14}>
                      <h2 style={{paddingTop:'20px'}}>Number Of Offencers</h2>
                    </Grid.Column>
                    <Grid.Row>
                    <Grid.Column width={8}>
                    <img src="./offence.png" alt="driver" style={{maxHeight:'100px'}}></img>
                    </Grid.Column>
                    <Grid.Column width={4}>
                        <h2>{numberofOffencers}</h2>
                    </Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Card.Header>
                <Card.Content>
                  <Card.Description>
                    This Number of offences have been powered
                  </Card.Description>
                </Card.Content>
              </Card>
              <Card style={{background:'#FFCDD2',width:'400px'}}>
                <Card.Header>
                  <Grid>
                    <Grid.Column width={12}>
                      <h2 style={{paddingTop:'20px'}}>Fine Ammount </h2>
                    </Grid.Column>
                    <Grid.Row>
                    <Grid.Column width={8}>
                    <img src="./fine.png" alt="driver" style={{maxHeight:'100px'}}></img>
                    </Grid.Column>
                    <Grid.Column width={4}>
                        <h2>{fineAmmount}</h2>
                    </Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Card.Header>
                <Card.Content>
                  <Card.Description>
                    This is the Total fine amount
                  </Card.Description>
                </Card.Content>
              </Card>
              </Card.Group>
              </Grid.Row>
            </Grid.Column>
          </Grid.Row>
        </Grid>

      </Layout>
      </div>
    );
  }
}

export default App;

当我通过菜单路由时，它会像这样在控制台上给我和警告。

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    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)

我进行了很多搜索以找到解决此问题的方法，但他们无能为力。如果有人可以帮助我找到解决此问题的方法，非常感谢。谢谢！

标签： reactjsreact-router

解决方案

这不是错误，而是警告。发生这种情况是因为您试图在 from 中渲染来自LinkReact Router 的组件。它们都被编译到DOM 中，所以一个元素不能是另一个元素的后代。Menu.Itemsemantic-ui-reactaaa

在你的 s 中试试这个Menu.Item：

<Menu.Item
  as={Link}
  to="/home"
  name="home"
  active={activeItem === "home"}
  onClick={this.handleItemClick}
>
  Home
</Menu.Item>

但是，我不确定这onClick部分，因为您想将菜单项用作链接，所以单击时它应该转到所需的 URL。那么，handleClick在这种情况下会怎么做呢？

请参阅文档的增强部分。它在主页上。

推荐阅读