Задать вопрос
miliko0022
@miliko0022
Краткие личные сведения, включая интересующую вас
react

Как использовать теги header, nav в react-router?

у меня вот такой код

App.tsx

import React, { FC, Fragment } from "react";
    import Nav from "./Components/Nav/Nav";
    
    const App: FC = () => (
      <Fragment>
        <Nav />
      </Fragment>
    );
    
    export default App;


Nav.tsx



const renderUntitled = ({
      match
    }: {
      match: faceMatch<{ PageList: string }>;
    }) => (
      <Fragment>
         <Logo/>
        <FormSearch params={""} />
        <ButSearch match={match} />
      </Fragment>
    );
        
        const Nav: FC = () => {
          return (<Fragment>
            <nav>
                <Link to="/">Amasia</Link>
                <Link to="/Mens/Hat/ListPage=15&Page=1">Product</Link>
              </nav>
              <Switch>
             <Route
              path="/"
              exact
              render={({ match }) => (
                <Fragment>
                   <Logo/>
                  <h1>{"Welcome to Amasia"}</h1>
                  <FormSearch params={""} />
                  <ButtLogSing />
                  <Head match={match} />
                </Fragment>
              )}
            />
           <Route path="/Mens/Hat/:PageList" render={renderUntitled} />
            <Route path="*" render={() => <Redirect to="/" />} />
              </Switch>
              </Fragment>
          );
        };

когда я нажимаю на Amasia, я хочу открыть этот компонент

<header>
        <nav> <Nav/> </nav>
        <Logo/>
        <FormSearch params={""} />
        <ButSearch match={match} />
    </header>


и когда вы нажимаете на продукт.

<Fragment>
    <header>
        <nav> <Nav/> </nav>
        <Logo/>
        <FormSearch params={""} />
        <ButSearch match={match} />
    </header>
        <Head match={match} />
 </Fragment>


Проблема в том, что я не понимаю, как использовать теги header, nav в в react-router .
  • Вопрос задан
  • 521 просмотр
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Насколько понял вашу задачу, вы хотите вынести Header и рендерить под ним разные страницы. Это можно сделать, например, так:
const Amasia = () => (
  <div>Amasia</div>
);

const Product = ({ match }) => (
  <div>
    Page number: {match.params.page}
  </div>
);

const Header = () => (
  <header>
    <nav>
      <Link to="/">Amasia</Link>
      <Link to="/Mens/Hat/1">Product</Link>
    </nav>
    <div>Logo</div>
    <div>FormSearch</div>
    <div>ButSearch</div>
  </header>
);

const App = () => (
  <>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Amasia} />
        <Route exact path="/Mens/Hat/:page" component={Product} />
      </Switch>
    </main>
  </>  
);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement,
);
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend developer (React)
Баланс-Платформа • Москва
До 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать картинки для слов
17 апр. 2024, в 00:13
800 руб./за проект
Разработка backend python+django
17 апр. 2024, в 00:06
240000 руб./за проект
Запуск django-проекта с помощью gunicorn + nginx
17 апр. 2024, в 00:02
1000 руб./за проект
Ещё заказы