路由不呈现组件。

Question

在KnowledgeBase.js中使用路由存在问题(下面的代码)。我正在尝试“在”另一条路由(在App.js中)中编写它们，但是什么也不起作用。也许有人能找到问题。

附注：控制台不会出现任何错误。

App.js

import React from "react";
import './App.css';
import Header from "./Components/Header/Header";

import Main from "./Components/Main/Main";
import {Route, Routes} from "react-router-dom";
import Home from "./Components/Main/Home/Home";
import Nav from "./Components/Nav/Nav";
import KnowledgeBase from "./Components/Main/KnowlegeBase/KnowledgeBase";
import Messages from "./Components/Main/Messages/Messages";

function App(props) {
  return (
    <div className="App">
      <Header forHeader={props.state}/>
      <Nav forNav={props.state}/>
      <Main forMain={props.state}>
        <Routes>
          <Route path='/home' element={<Home forHome={props.state}/>}/>
          <Route path='social-network/' element={<Home forHome={props.state}/>}/>
          <Route path='/knowledge-base/*' element={<KnowledgeBase forKnowledgeBase={props.state}/>}/>
          <Route path={"/messages"} element={<Messages forMessages={props.state}/>}/>
        </Routes>
      </Main>
    </div>
  );
}

export default App;

KnowledgeBase.js

import React from "react";
import style from './KnowledgeBase.module.css';
import Menu from "./Menu/Menu";
import Blocks3 from "./Blocks3/Blocks3";
import {Route, Routes} from "react-router-dom";
import BaseAll from "./BaseAll/BaseAll";
import Blocks2 from "./Blocks2/Blocks2";
import Blocks1 from "./Blocks1/Blocks1";

const KnowledgeBase = (props) => {
  return (
      <div className={style.knowledgeBase}>
          <Menu forMenu={props.forKnowledgeBase}/>
          <BaseAll forBaseAll={props.forKnowledgeBase}>
              <Routes>
                  <Route path="/knowledge-base/purchase-and-refund" element={<Blocks3/>}/>
                  <Route path="/knowledge-base/popular-questions" element={<Blocks2/>}/>
                  <Route path="/knowledge-base/analytics" element={<Blocks1/>}/>
              </Routes>
          </BaseAll>
      </div>
  )
}

export default KnowledgeBase

BaseAll.js

import React from "react";
import style from './BaseAll.module.css'

const BaseAll = (props) => {
  return (
      <div className={style.baseAll}>
          {props.children}
      </div>
  )
}

export default BaseAll

Menu.js (它拥有所有的NavLink)

import React from "react";
import style from './Menu.module.css'
import {NavLink} from "react-router-dom";

const Menu = (props) => {
  return (
      <div className={style.menu}>
          <header>{props.forMenu.menu.header}</header>

          <form action="">
              <div>
                  <img src={props.forMenu.menu.search_img} alt=""/>
                  <input type="text" placeholder={props.forMenu.menu.input}/>
              </div>
              <button type={"submit"}>{props.forMenu.menu.search_btn}</button>
          </form>

          <nav>
              <NavLink to={"/knowledge-base/analytics"} className={style.menu_NavLink}>{props.forMenu.menu.nav1}</NavLink>
              <NavLink to={"/knowledge-base/popular-questions"} className={style.menu_NavLink}>{props.forMenu.menu.nav2}</NavLink>
              <NavLink to={"/knowledge-base/purchase-and-refund"} className={style.menu_NavLink}>{props.forMenu.menu.nav3}</NavLink>
          </nav>
      </div>
  )
}

export default Menu

我希望在通过NavLink导航时，相关的块会出现在搜索菜单下。我试图在App.js和KnowledgeBase.js中实现许多选项，但没有找到一个可以工作的选项。

Answer 1

在KnowledgeBase.js文件中，从每个路由中删除/knowledge-base。route路由器会自动添加每个子节点的父路由路径。如果父路径已与另一条路由(即/knowledge-base/* )一起放置在其中，则不必编写每个子路径的父路径

const KnowledgeBase = (props) => {
  return (
      <div className={style.knowledgeBase}>
          <Menu forMenu={props.forKnowledgeBase}/>
          <BaseAll forBaseAll={props.forKnowledgeBase}>
              <Routes>
                  <Route path="/purchase-and-refund" element={<Blocks3/>}/>
                  <Route path="/popular-questions" element={<Blocks2/>}/>
                  <Route path="/analytics" element={<Blocks1/>}/>
              </Routes>
          </BaseAll>
      </div>
  )
}