NikFaraday
@NikFaraday
Student full-stack Developer

Как реализовать локальную навигацию в React?

Настроена маршрутизация на главной странице App.tsx:
import { Index as PrinterIndex } from "./pages/printer/Index";
const App = () => {
    return(
        <BrowserRouter>
            <Header />
            <Sidebar />

            <Layout style={{ marginInlineStart: 'calc(20% + 10px)', backgroundColor: '#33393f', minHeight: '100hv' }}>
                <Routes>
                    <Route element={<Dashboard/>} path="/" />
                    <Route element={<PrinterIndex />} path="/printer/:id" />
                    <Route element={<NotFound />} path="*" />
                </Routes>
            </Layout>
        </BrowserRouter>
    )
}

export default App;


На этой странице хочу настроить ещё локальную навигацию:
export const Index: React.FC = () => {
    const { id } = useParams<{ id: string }>();
    const navigate = useNavigate();
    const location = useLocation();
    const printerOptions : OptionNavigator[] = [
        { label: 'Printing', path: 'printing' },
        { label: 'Settings', path: 'settings' }
    ];

    return (
        <Row>
            <Col span={18}>
                <Row>
                    <Col span={6}>
                        {
                            printerOptions.map((option, index) => (
                                <PrinterOptions 
                                    label={option.label} 
                                    onClick={() => navigate(`/printer/${id}/${option.path}`)} 
                                    key={index} 
                                />
                            ))
                        }
                    </Col>
                    <Col span={18}>
                        <Routes location={location}>
                            <Route path="printing" element={<EmptyFileLoader />} />
                            <Route path="settings" element={<Settings />} />
                        </Routes>
                    </Col>
                </Row>
            </Col>
            <Col span={6}>
                <CommonInformation id={id!} />
            </Col>
        </Row>
    );
};


Но при нажатии выполняется общая навигация по сайту, а не рендринг соответствующего компоненты в соответствующем окне. Как её правильно настроить?
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 окт. 2024, в 08:42
20000 руб./за проект
06 окт. 2024, в 08:24
2500000 руб./за проект
06 окт. 2024, в 07:28
1111 руб./за проект