反应 - 反应路由器 - A<router> 可能只有一个子元素</router>

Question

I'm a newbie at React, please correct me if I'm wrong...I've used the Switch tag to enclose multiple Routes in my MainComponent.js file. However, I still got an error that says "A may have only one child element". I'm trying to navigate from one page to another. For example, when I click on Menu in the landing page, I would like to get routed to Menu. Please advise what went wrong. Thanks in advance.

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();

App.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;

Answer 1

I'm a newbie at React, please correct me if I'm wrong...I've used the Switch tag to enclose multiple Routes in my MainComponent.js file. However, I still got an error that says "A may have only one child element". I'm trying to navigate from one page to another. For example, when I click on Menu in the landing page, I would like to get routed to Menu. Please advise what went wrong. Thanks in advance.

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();

App.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;

Answer 2

Just remove the <div className="App"> from your App.js file. And use the below code as I have written below. It will 100% work for you.

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

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