React router v. 5.3.0：路由组件不显示答案

【问题标题】：React router v. 5.3.0: route component doesn't displayReact router v. 5.3.0：路由组件不显示
【发布时间】：2021-12-12 05:38:47
【问题描述】：

共有三个路由组件。导航栏始终可见并且工作正常。主页 Home 也可以使用，我可以单击 Checkout 的链接，但在 Checkout 页面上，除了空白背景（以及导航栏）之外，我看不到任何文本、图像或任何内容。当我尝试将渐变背景 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;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

问题在于 Switch 仅呈现 first 匹配的 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>

【讨论】：

【解决方案2】：

只需将结帐路线设置在回家路线上方

   <Route path='checkout' component={Checkout}>
        <Checkout />
      </Route>
      <Route exact path='/' component={Home}>
        <Home />
      </Route>

【讨论】：