Как использовать теги заголовка, навигация в реагирующем маршрутизаторе - PullRequest
Новая
       15

Как использовать теги заголовка, навигация в реагирующем маршрутизаторе

6 голосов
/ 14 июня 2019

У меня есть этот код

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>

Я новичок, чтобы реагировать. Возможно, я сделал неправильную навигацию. Проблема в том, что я не понимаю, как использовать теги заголовка nav в маршрутизаторе реагирования. Объяснить поисковой системе, что такое навигация сайта и руководитель сайта

Ответы [ 2 ]

3 голосов
/ 15 июня 2019

Насколько ваша задача понятна, вы хотите визуализировать заголовок и отображать под ним разные страницы. Это можно сделать, например, следующим образом: 

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,
);
1 голос
/ 14 июня 2019

Теперь вы можете визуализировать любой компонент отдельным методом.

в вашем файле nav.tsx просто определите функцию следующим образом. 

function Amasia({ match }) {
  return (
    <header>
       <nav> <Nav/>
       <Logo/>
       <FormSearch params={""} />
       <ButSearch match={match} />
    </header>
  );
}
function Product({ match }) {
  return (
    <Fragment>
       <header>
         <nav> <Nav/>
         <Logo/>
         <FormSearch params={""} />
         <ButSearch match={match} />
       </header>
       <Head match={match} />
    </Fragment>
  );
}

и заменить предыдущую линию маршрута 

<Route exact path="/" component={Amasia} /> 
<Route exact path="/Mens/Hat/:PageList" component={Product} />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...