0

Возникла проблема с использованием роутов в KnowledgeBase.js (код ниже). Пытаюсь прописать их "внутри" другого Route(который в App.js), но ничего не работает. Возможно кто-то сможет найти проблему.

p.s в консоль не выдает никаких ошибок

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

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import state from './Components/state'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App state={state}/>
    </BrowserRouter>
);
3
  • еще файл index.js сюда и все станет понятнее.
    – Armen
    27 ноя 2022 в 22:57
  • @Armen добавил,,,,,,,
    – Korostev
    27 ноя 2022 в 23:01
  • пока понятнее не стало, шя поиграюсь возможно понадобится package.json. скоро дам знать.
    – Armen
    28 ноя 2022 в 1:38

1 ответ 1

0

к сожелению запустить не получится, не смог найти скрипт подключения react router dom, но вообще для решения проблем надо тупо убрать весь лишний код и глянуть как все работает.

если мы перейдем в x/[1,2,3,4] все будет норм.

тут и проблема стала понятной у тебя /x/1 написано в внутренних роутах а надо просто /1 либо 1

но вообще заюзай createBrowserRouter и RouterProvider(эти из последней версии вроде) более понятные что ли, наверное имеют свои фишки не углублялся.

вот сюда за доп инфой: https://reactrouter.com/en/main/start/tutorial

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/x/*" element={<Some />} />
      </Routes>
    </div>
  );
};

const Some = () => {
  return (
    <div>
      abcd
      <Routes>
        <Route path="1" element={<div>1</div>} />
        <Route path="2" element={<div>2</div>} />
        <Route path="3" element={<div>3</div>} />
        <Route path="4" element={<div>4</div>} />
      </Routes>
    </div>
  );
};

ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.