How to use header, nav tags in react-router?

M

miliko mikoyan2019-06-14 03:31:37

typescript

miliko mikoyan, 2019-06-14 03:31:37

I have this
App.tsx code

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>
          );
        };

when i click on Amasia i want to open that component

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

and when you click on a product.

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

The problem is that I don't understand how to use the header, nav tags in react-router .

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Spirin, 2019-06-14
@miliko0022

As far as I understand your task, you want to take out the Header and render different pages under it. This can be done, for example, like this:

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,
);