如何将多个 React 类渲染到一个根节点中？

Question

I am creating a website using React. I realized after building, it only displayed the and components.

This is how my App.js looks like:

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
import About from './components/About/About';
import Team from './components/Team/Team';
import Projects from './components/Projects/Projects';
import Contact from './components/Contact/Contact';
import Documents from './components/Documents/Documents';
import FAQ from './components/FAQ/FAQ';
import { Route } from 'react-router-dom';

class App extends Component {

  render() {
      return (
        <div>
          <Header />
            <Route exact={true} path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/projects" component={Projects} />
            <Route path="/team" component={Team} />
            <Route path="/contact" component={Contact} />
            <Route path="/documents" component={Documents} />


          <Footer />
        </div>
      );
    }
  }

export default App;

I would like to know how can I render all the other classes so that they display as their own pages when the header links are clicked, like in a normal website

Answer 1

You can create links to these pages using Link:

import { Link } from 'react-router-dom';
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/projects">Projects</Link>
...

The way I do it is to have a NavBar component with all the Links and an AppRoutes component with all the routes like this:

const App = () => {
    return (
        <BrowserRouter>
                <NavBar />
                <AppRoutes />
        </BrowserRouter>
    );
}

Answer 2

I have finally found a solution:

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
import About from './components/About/About';
import Team from './components/Team/Team';
import Projects from './components/Projects/Projects';
import Contact from './components/Contact/Contact';
import Documents from './components/Documents/Documents';
import FAQ from './components/FAQ/FAQ';
import { HashRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';

function App() {

      return (
        <Router>
            <div className="App">
              <Header />
              <Switch>
                <Route exact={true} path="/" component={Home} />
                <Route exact path="/about" component={About} />
                <Route exact path="/projects" component={Projects} />
                <Route exact path="/team" component={Team} />
                <Route exact path="/contact" component={Contact} />
                <Route exact path="/documents" component={Documents} />
              </Switch>
              <Footer />
            </div>
        </Router>
      );
    }

export default App;

What I had to do was nest the routes inside Route and Switch, and then change the import to HashRouter, this was the reason the components were not loading.