Как сделать не точное сравнение в Routes React?

Question

[Дмитрий Путилов]

всем привет, есть вот такая проблема, есть вот такой кусок кода

import Header from "./components/Header/Header";
import {Routes} from 'react-router'
import './index.css'
import {Route} from "react-router-dom";
import {CreateFieldProvider} from "./components/CreateField/contextCreateField";
import {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {ThunkCheckPortal} from "./store/thunk/ThunkCheckPortal";
import {ThunkSetPortal} from "./store/thunk/ThunkSetPortal";
import FieldsList from "./components/ListFields/FieldsList";

function App() {

    const dispatch = useDispatch()
    const {loading, portal} = useSelector(state => state.createFields)

    useEffect((() => {
        dispatch(ThunkSetPortal())
    }), [])

    useEffect(() => {
        portal && dispatch(ThunkCheckPortal(portal))
    }, [portal])

    return (
        <div className="App">
            <Routes>
                <Route path={'/settings'} element={<Header />} />
                <Route path='/settings/create' element={<CreateFieldProvider />}/>
                <Route path={'/settings/lists'} element={<FieldsList />} />
            </Routes>
        </div>
    );
}

export default App;

Я пытаюсь сделать так, что бы Header появлялся всегда, если есть /settings в url адресе, а точнее если он с него начинается, и вопрос вообщем то в том, как это сделать, потому что сейчас это работает не так как надо, открывается только тгд, когда есть /settings, а если есть /settings/чтотоеще, то тгд не работает
Как быть, подскажите

Answer 1

[Дмитрий Путилов]

решение проблемы было в том, что нужно использовать в родительском элементе, этот тег указывает react, где отображать вложенные элементы, импортируется он из
import {Link, Outlet} from "react-router-dom";

НО у меня почему то react не видит эту функцию, но она работает, так что если будите использовать, не обращайте внимания что реакт не видит его в инпорте, по крайней мере у меня так
В кратце нужно этот Outlet прописать в header

<Routes>
                <Route path='/settings' element={<Header />}>
                    <Route index path='create' element={<CreateFieldProvider/>}/>
                    <Route path='lists' element={<FieldsList/>}/>
                </Route>
                <Route path={'/work'} element={<Work/>}/>

            </Routes>

А вот сам header

<>
        <header>
            <div className="content">
                <div className={classes.header_wrapper}>
                    <div className={classes.wrapper_logo}>
                        <img src="/image/logo.png" alt=""/>
                    </div>

                    <div className={classes.wrapper_list}>
                        <Link to='/settings'>Главная</Link>
                        <Link to='/settings/create'>Создать </Link>
                        <Link to='/settings/lists'>Список </Link>
                    </div>
                </div>
            </div>
        </header>
            {(loading_list || loading_create) && <Preloader />}

            <Outlet />
        </>

Answer 2

[Сергей delphinpro]

Ну вот же прямо в документации пример вложенных роутов https://reactrouter.com/en/main/components/routes

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

У вас будет примерно так

<Routes>
  <Route path="/settings" element={<...здесь лейаут с шапкой />}>
    /// а дальше вложенные роуты
    <Route path='/create' element={<CreateFieldProvider />}/>
    <Route path={'/lists'} element={<FieldsList />} />
  </Route>
</Routes>

Comments

[Дмитрий Путилов]

Я попробовал сделать вот так

<div className="App">
            <Routes>
                <Route path={'/settings'} element={<Header/>}>
                    <Route path={'/settings/create'} element={<CreateFieldProvider/>}/>
                    <Route path={'lists'} element={<FieldsList/>}/>
                </Route>
                <Route path={'/work'} element={<Work/>}/>
            </Routes>
        </div>

В этом случае он почему то не отображает вложенные элементы, только шапку

Пробовал еще вмсето /settings/create писать просто /create - тгд выдает ошибку что путь дорлжен начинаться с settings

[Сергей delphinpro]

Дмитрий Путилов, наверное потому что в компоненте Header вы должны вызывать компонент роутера.
Я больше по Vue специализируюсь и не знаю как там в реакте, но скорее всего примерно так же.