Javascript React Router 问题：导航在多组件布局中无法按预期工作

发布于09月07日

我正在使用Reaction-Router构建一个Reaction应用程序，但我遇到了路由导航问题.我有一个多组件布局，其中我将组件组织到不同的文件中.以下是我的代码的简化 struct :

App.js:包含顶级路由.
Layout.js:表示带有侧栏、顶栏、内容区域和页脚的布局 struct .
MainArea.js:包含特定于主内容区域的其他嵌套路由.

我面临的问题是，当我导航到某些路由时，导航不能像预期的那样工作.例如，单击主内容区域中指向"/profile"的链接应该会显示用户配置文件，但实际并非如此.

以下是我的代码 struct 的一个示例:

App.js

import { Routes, Route } from "react-router-dom";
import { LoginPage, SignUp, LayOut } from "../src/Shared/export";
import Layout from "./Layout";
import MainArea from "./MainArea";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<SignUp />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/home" element={<LayOut />} />
      </Routes>
    </>
  );
}

export default App;

Layout.js

import Sidebar from "./Sidebar";
import Topbar from "./TopBar";
import Main from "./Main";
import Footer from "./Footer";

function Layout() {
  return (
    <div>
      <div className="layout">
        <div className="tob-bar">
          <Topbar />
        </div>

        <div className="content">
          <Main />
        </div>

        <div className="side-bar">
          <Sidebar />
        </div>

        <div className="footer">
          <Footer />
        </div>
      </div>
    </div>
  );
}

export default Layout;

MainArea.js

import { Routes, Route } from "react-router-dom";
import Content from "./Content";
import Profile from "./profile/userProfile";

function MainArea() {
  return (
    <div>
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/content" element={<Content />} />
      </Routes>
    </div>
  );
}

export default MainArea;

导致此问题的原因可能是什么？如何修复该问题以确保路由导航在我的多组件布局中正常工作？

该应用程序呈现一个没有错误的空白页面.

function App() { return ( <Routes> <Route path="/" element={<SignUp />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/home/*" element={<Layout />} /> </Routes> ); }

function MainArea() { return ( <div> <Routes> <Route path="/profile" // <-- "/home/profile" element={<Profile />} /> <Route path="/content" // <-- "/home/content" element={<Content />} /> </Routes> </div> ); }

import { Outlet } from 'react-router-dom'; import Sidebar from "./Sidebar"; import Topbar from "./TopBar"; import Main from "./Main"; import Footer from "./Footer"; function Layout() { return ( <div> <div className="layout"> <div className="tob-bar"> <Topbar /> </div> <div className="content"> <Outlet /> // <-- render Outlet for nested routes </div> <div className="side-bar"> <Sidebar /> </div> <div className="footer"> <Footer /> </div> </div> </div> ); }

function App() { return ( <Routes> <Route path="/" element={<SignUp />} /> <Route path="/login" element={<LoginPage />} /> <Route element={<Layout />}> // <-- pathless <Route path="profile" element={<Profile />} /> // <-- "/profile" <Route path="content" element={<Content />} /> // <-- "/content" </Route> </Routes> ); }

Javascript React Router 问题：导航在多组件布局中无法按预期工作

推荐答案

Javascript相关问答推荐

jsfat的黑色画布输出

我可以在useState中调用函数并使用其数据吗

如何在不使用类型化数组的情况下将32位浮点数按位转换为整值？

从外部访问组件变量-Vueejs

如何在加载的元数据上使用juserc和await中获得同步负载？

使用useParams路由失败

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新？

rxjs插入延迟数据

在数组中查找重叠对象并仅返回那些重叠对象

让chart.js饼图中的一个切片变厚？

Rxjs流中生成IMMER不能在对象上操作

Reaction组件在本应被设置隐藏时仍显示

搜索功能不是在分页的每一页上进行搜索

AddEventListner，按键事件不工作

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

处理app.param()中的多个参数

在渲染turbo流之后滚动到元素

在GraphQL解析器中修改上下文值

按特定顺序将4个数组组合在一起，按ID分组