Javascript 布局组件中没有覆盖路由，但仍然在 React 中渲染布局

发布于06月08日

我在没有布局组件的情况下很难制定路由.请先判断我的代码.

// App.js

const App = () => {
  return (
    <div className={styles.container}>
      <Header />
      <main>
        <QuizBoxContainer>
          <Routes>
            <Route path='/' element={<QuizSelect />} />
            <Route path='quiz-for/:language' element={<QuizCard />} />
            <Route path='result' element={<ResultPage />} />
          </Routes>
        </QuizBoxContainer>
        <Routes>
          <Route path='wrong-answer' element={<WrongAnswer />} />
        </Routes>
      </main>
    </div>
  )
}

在代码中，<QuizBoxContainer>是布局组件.

What I was trying to do is making another path,

<Routes>
   <Route path='wrong-answer' element={<WrongAnswer />} />
</Routes>

outside of 100 so I can use another layout on this component.

然而，当我回答错误时，

It still renders.

我的代码有什么问题，如何解决？

Issue

这是因为QuizBoxContainer布局包装器组件没有在任何路由上渲染，而是渲染了101.

Solution

将QuizBoxContainer移到layout route.您需要更新QuizBoxContainer，使其渲染Outlet组件，而不是childrenprops .

例子:

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

const QuizBoxContainer = () => {
  ...

  return (
    ... quiz container layout/styling ...
    <Outlet /> // <-- nested routes render content here
    ...
  );
};

在布局管线上渲染QuizBoxContainer，包裹要在其中渲染的管线，在布局管线外渲染错误的应答管线.

const App = () => {
  return (
    <div className={styles.container}>
      <Header />
      <main>
        <Routes>
          <Route element={<QuizBoxContainer />}>
            <Route path='/' element={<QuizSelect />} />
            <Route path='quiz-for/:language' element={<QuizCard />} />
            <Route path='result' element={<ResultPage />} />
          </Route>
          <Route path='wrong-answer' element={<WrongAnswer />} />
        </Routes>
      </main>
    </div>
  )
}

Javascript 布局组件中没有覆盖路由，但仍然在 React 中渲染布局

推荐答案

Issue

Solution

Javascript相关问答推荐

如何在NightWatch.js测试中允许浏览器权限？

每次子路由重定向都会调用父加载器函数

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

IMDB使用 puppeteer 加载更多按钮(nodejs)

如何添加绘图条形图图例单击角形事件

如何从Intl.DateTimeFormat中仅获取时区名称？

变量的值在Reaction组件中的Try-Catch语句之外丢失

如何将多维数组插入到另一个多维数组中？

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

如何将未排序的元素追加到数组的末尾？

如何在JAVASCRIPT中临时删除eventListener？

如何 for each 输入动态设置输入变更值

Reaction-SWR-无更新组件

P5.js中的分形树

通过跳过某些元素的对象进行映射

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)？如果是这样的话，是如何做到的呢？

如何在独立的Angular 应用程序中添加Lucide-Angel？

是否设置以JavaScript为背景的画布元素？

我为什么要使用回调而不是等待？

无法向甜甜圈图表上的ChartJSImage添加可见标签