Reactjs 如何在react路由器中使用标题标签、导航_Reactjs_Typescript_React Router

Reactjs 如何在react路由器中使用标题标签、导航

reactjs typescript

Reactjs 如何在react路由器中使用标题标签、导航,reactjs,typescript,react-router,Reactjs,Typescript,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; import React，{FC，Fragment}来自“React”；从“/

我有这个密码

App.tsx

import React, { FC, Fragment } from "react";
import Nav from "./Components/Nav/Nav";

const App: FC = () => (
  <Fragment>
    <Nav />
  </Fragment>
);

export default App;

import React，{FC，Fragment}来自“React”；
从“/Components/Nav/Nav”导入导航；
常量应用程序：FC=（）=>(
);
导出默认应用程序；

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

const renderUntitled=({
比赛
}: {
匹配：面部匹配；
}) => (
);
常数导航：FC=（）=>{
返回(
阿玛西亚
产品
(
{“欢迎来到阿玛西亚”}
)}
/>
} />
);
};

当我点击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>

我是react新手。可能是导航错误。问题是我不知道如何在react路由器中使用导航标题标记。要向搜索引擎解释什么是站点导航和站点标题，现在可以用单独的方法呈现任何组件

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

函数Amasia（{match}）{
返回(
);
}
函数乘积（{match}）{
返回(
);
}

并替换以前的路线

<Route exact path="/" component={Amasia} /> 
<Route exact path="/Mens/Hat/:PageList" component={Product} />

现在，您可以用单独的方法渲染任何组件

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

函数Amasia（{match}）{
返回(
);
}
函数乘积（{match}）{
返回(
);
}

并替换以前的路线

<Route exact path="/" component={Amasia} /> 
<Route exact path="/Mens/Hat/:PageList" component={Product} />

就您的任务而言，您希望呈现标题并呈现标题下的不同页面。例如，这可以通过以下方式实现：

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

const Amasia=（）=>(
阿玛西亚
);
常量乘积=（{match}）=>(
页码：{match.params.Page}
);
常量头=（）=>(
阿玛西亚
产品
标志
FormSearch
但是搜索
);
常量应用=（）=>(
);
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素，
);

就您的任务而言，您希望呈现标题并呈现标题下的不同页面。例如，这可以通过以下方式实现：

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

const Amasia=（）=>(
阿玛西亚
);
常量乘积=（{match}）=>(
页码：{match.params.Page}
);
常量头=（）=>(
阿玛西亚
产品
标志
FormSearch
但是搜索
);
常量应用=（）=>(
);
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素，
);

以及将在哪个组件中

？@叔叔您已经添加了这个，我只需更改组件属性值Nav.tsx文件，您的意思是我必须这样写。据我所知，如果我写在路由器Nav中，我将得到一个永恒的循环。我只是给了你一个在同一个文件中如何做的基本概念，如果你想为任何组件创建另一个文件，只需在组件属性中调用它们。在哪个组件中将

？@叔叔你已经添加了这个，我只需更改组件属性值Nav.tsx文件你的意思是我必须这样写。据我所知，如果我在路由器Nav中写入，我将得到一个永恒的循环。我只是给了你一个在同一个文件中如何执行的基本概念，如果你想为任何组件创建另一个文件，只需在组件属性中调用它们。