reactjs - React 路由器 v.5.3.0 : route component doesn't display

Question

共有三个路线组件。导航栏始终可见并且工作正常。主页“主页”也可以使用，我可以单击“结帐”链接，但在“结帐”页面上，我看不到任何文本、图像或除空白背景(以及导航栏)之外的任何内容。当我尝试将渐变背景 div 包裹在 Checkout 周围时，它也不起作用。重命名 Checkout 的路径也没有帮助。

import React from "react"
import './App.css'
import Navbar from './navbar'
import Home from './Home'
import Checkout from "./Checkout"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <div className="gradient__bg">
          <Route exact path='/' component={Home}>
            <Home />
          </Route>
          </div>
          <Route path='checkout' component={Checkout}>
            <Checkout />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Answer 1

问题是 Switch 仅渲染第一个匹配的 Route 或 Redirect 组件，但您已将 Route 组件之一包装在 div 元素中，这打破了这种抽象并且始终会被渲染，因此如果有路由在 div 之后，它们将永远无法匹配和渲染。这意味着结帐路线/路径永远不会呈现。

要解决此问题，请将包装器 div 移至 Route 组件内。

此外，不要指定 component 属性并提供子组件。您可以包装子组件

<Route path='/'>
  <div className="gradient__bg">
    <Home />
  </div>
</Route>

或者使用 render 属性并将路由属性转发到 Home 组件

<Route
  path='/'
  render={props => (
    <div className="gradient__bg">
      <Home {...props} />
    </div>
  )}
/>

注意:在 Switch 组件路径顺序和特异性很重要的情况下，您应该将路由从更具体的路径排序到不太具体的路径。不要忘记 Checkout 组件的路径应包含前导 "/"，即应为 "/checkout"。

<Router>
  <div className="App">
    <Navbar />
    <Switch>
      <Route path='/checkout'>
        <Checkout />
      </Route>
      <Route path='/'>
        <div className="gradient__bg">
          <Home />
        </div>
      </Route>
    </Switch>
  </div>
</Router>