如何將多個 React 類渲染到一個根節點中？

Question

我正在使用 React 創建一個網站。 我在構建后意識到，它只顯示和組件。

這就是我的 App.js 的樣子：

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;

我想知道如何渲染所有其他類，以便在單擊 header 鏈接時顯示為自己的頁面，就像在普通網站中一樣

Answer 1

您可以使用 Link 創建指向這些頁面的鏈接：

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

我這樣做的方法是擁有一個包含所有鏈接的 NavBar 組件和一個包含所有路由的 AppRoutes 組件，如下所示：

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

Answer 2

我終於找到了解決方案：

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;

我要做的就是將路由嵌套在 Route 和 Switch 中，然后將導入更改為 HashRouter，這就是組件未加載的原因。