javascript - 反应 - 反应路由器 - A可能只有一个子元素

Question

我是 React 的新手，如果我错了，请纠正我...我使用 Switch 标签将多个路由包含在我的 MainComponent.js 文件中。但是，我仍然收到一条错误消息，提示“A 可能只有一个子元素”。我正在尝试从一页导航到另一页。例如，当我在登录页面中单击菜单时，我想被路由到菜单。请指教出了什么问题。提前致谢。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

应用程序.js

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';

class App extends Component {
  // pass dishes to children (MenuComponent.js) as props
  /*
  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES
    };
  }*/

  render() {
    return (
      <BrowserRouter>           {/*  Make use of React Router */}
          <div className="App">
              <Main />
          </div>
      </BrowserRouter>
    );
  }
}

export default App;

MainComponent.js

// Container Component

import React, { Component } from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';          // .. means to go up one level to src
import { Switch, Route, Redirect } from 'react-router-dom';

class Main extends Component {
    // pass dishes to children (MenuComponent.js) as props
    constructor(props) {
        super(props);

        this.state = {
            dishes: DISHES,
            // selectedDish: null
        };
    }
/*
    onDishSelect(dishId) {
        this.setState({selectedDish: dishId});
    }
*/
    render() {
        const HomePage = () => {
            return (
                <Home />
            );
        }
        
        return (
            <div>
                <Header />
                <Switch>
                    <Route path="/home" component={HomePage} />
                    <Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} />  {/* path should exactly match /menu and nothing else after /menu */}
                                                                                                        {/* component={() => <Menu dishes={this.state.dishes} />} ----> this will allow to pass props to Menu component */}
                    <Redirect to="/home" />     {/* if the path doesn't match any above, redirect to /home */}
                </Switch>
                <Footer />                                                                                                        
            </div>
        );
    }
}

export default Main;

标签： javascriptreactjsreact-router-dom

Answer 1

只需<div className="App">从您的 App.js 文件中删除 。并使用我在下面写的下面的代码。它将 100% 为您工作。

import { BrowserRouter } from 'react-router-dom';

class App extends Component 
 { 
  render() {
    
    return ( 
    <BrowserRouter>
        <Main/>
   </BrowserRouter>
    );
   
 }
}
export default App;