React js маршрутизация

Question

У меня два блока на главной странице, и у каждого блока свой меню. Меню главной страницы работает с помощью react-router-dom... но как организовать работы блочных менюшек? Ведь route меняет url, а мне нужно, чтобы переходы были внутри блока...даже не знаю какой код тут показывать,но надеюсь вопрос понятен... Прошу помочь.

Answer 1

Я так понял что нужна навигация на react-router-dom. Решением может быть:

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

const ItemList = ({ history }) => {
  const arr = [
    {
        id: 1,
        title: "Title1",
        text:
            "1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 
    corrupti optio ipsam, libero tempora cum quis dolor qui, nisi amet placeat fugiat? 
    Architecto ea nihil ipsam ratione praesentium nostrum necessitatibus!"
    },
    {
        id: 2,
        title: "Title2",
        text:
            "2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 
    corrupti optio ipsam, libero tempora cum quis dolor qui, nisi amet placeat fugiat? 
    Architecto ea nihil ipsam ratione praesentium nostrum necessitatibus!"
    },
    {
        id: 3,
        title: "Title3",
        text:
            "3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 
    corrupti optio ipsam, libero tempora cum quis dolor qui, nisi amet placeat fugiat? 
    Architecto ea nihil ipsam ratione praesentium nostrum necessitatibus!"
    }
];

const handleItemClick = ({ title, text }) =>
    history.push("/info", { title, text });

return (
    <div className="itemList">
        {arr.map(({ id, title, text }) => (
            <div
                className="item"
                onClick={() => handleItemClick({ title, text })}
                key={id}
                style={{
                    border: "1px solid grey",
                    margin: "1rem",
                    padding: "1rem",
                    width: "10rem"
                }}
            >
                {title}
            </div>
        ))}
    </div>
  );
};

const Info = ({
  location: {
    state: { title, text }
  }
}) => {
  return (
    <div
        className="info"
        style={{
            border: "1px solid grey",
            margin: "1rem",
            padding: "1rem"
        }}
    >
        <h3>{title}</h3>
        <p>{text}</p>
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
        <div style={{ display: "flex", flexDirection: "row" }}>
            <Route path="/" component={ItemList} />
            <Route path="/info" component={Info} />
        </div>
    </BrowserRouter>
  );
};
export default App;

Если выше по иерархии раутов есть компоненты то нужно добавить их в путь. Или чтобы не менялся URL не использовать react-router

БЛОГ НА HUSL

React js маршрутизация

Ответы (1 шт):