Reactjs 使用React router dom时更改主页上的导航栏

我想做的就是在主页上有一个不同的导航栏，在其他页面上有一个不同的导航栏。我使用过类似于

窗口.位置.路径名

以及

与路由器

的东西。这些东西只有在页面重新加载时才起作用。使用

链接

并从主页导航到新页面时，主页的导航栏将保留在其他页面上，直到我重新加载，反之亦然

对我有用的是使用

useffect（（）=>{document.getElementById（“主导航id”）.style.display=“无”document.getElementById（“常规导航id”）.style.display=“block”}，[]}

但是，我必须在每个组件页面上都这样做。我想知道是否有更好的方法来做到这一点。谢谢你的帮助

编辑： 这就是我现在尝试的

“/HomeNavbar.jsx”

返回(
{window.location.pathname==“/”(
“此处的主导航条形码”
)：null}
);
};

因此，当我从其他页面遍历到主页时，这非常有效。我在常规导航栏中编写了类似的代码，但又出现了相同的问题。导航栏仅在我重新加载页面时加载

“/RegularNavbar.jsx”

返回(
{window.location.pathname==“/”？空：(
“此处为常规导航条形码”
)}
);
};

您可以使用不同的导航栏创建两种不同的布局（高阶组件），并使用布局1包装主页，使用布局2包装其他组件

import React from 'react';
import { Link } from 'react-router-dom';
const Layout1 = (props) => (
  <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>
      <div>{props.children}</div>
  </div>
);

export default Layout1;

从“React”导入React；
从'react router dom'导入{Link}；
常量布局1=（道具）=>(

家
关于
话题

{props.children}
);
导出默认布局1；

布局2：

import React from 'react';
import { Link } from 'react-router-dom';
const Layout2 = (props) => (
  <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topicgdfgdgs</Link></li>
      </ul>
      <p>this is a different nav bar, different from the home page</p>
      <div>{props.children}</div>
      <hr/>
  </div>
);

export default Layout2;

从“React”导入React；
从'react router dom'导入{Link}；
常量布局2=（道具）=>(

家
关于
主题GDFGDGS

这是一个不同的导航栏，与主页不同

{props.children}

);
导出默认布局2；

主组件：

import React from 'react';
import Layout1 from '../Layouts/Layout1';
const Home = () => (
  <Layout1>
    <div>
      <h2>Home</h2>
    </div>
  </Layout1>
);

export default Home;

从“React”导入React；
从“../Layouts/Layout1”导入布局1；
常量Home=（）=>(
家
);
导出默认主页；

任何其他组件：

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Layout2 from '../Layouts/Layout2';

const Topics = ({ match }) => (
  <Layout2>
    <div>
      <h3>topics</h3>
    </div>
  </Layout2>
);

export default Topics;

从“React”导入React；
从“react router dom”导入{Link，Route}；
从“../Layouts/Layout2”导入布局2；
常量主题=（{match}）=>(
话题
);
导出默认主题；

---

导航栏也是一个React组件吗？是的，先生。我把它放在浏览器路由器的组件顶部，这样它就会出现在所有页面上。Id是我应用CSS的导航主容器的Id。请分享整个代码。有很多这样的代码。你能指定你想看@ShivangGupthey man的代码吗？你的答案非常好地工作。但是，无论我喜欢与否，我都必须将我的返回声明附在ING中？有没有一种方法可以让我只做一次，并且在任何地方都可以使用？谢谢你的回答。@Damandaiel2000是的，你可以创建两个更高阶的组件，其中包含导航栏和react router的路由组件。使用它们在你的路由上。第一个布局在你的主路由上，第二个布局在其他Stackblitz示例上。看看MainNavRoute文件和OtherNav route文件，以及我如何将它们用于index.js文件。刚刚看到它。这对我来说是新的，但它起了作用。你能告诉我这些行的意思吗-

const OtherNavRoute=（{component:component，…rest}）=>{

和

{

import React from 'react';
import Layout1 from '../Layouts/Layout1';
const Home = () => (
  <Layout1>
    <div>
      <h2>Home</h2>
    </div>
  </Layout1>
);

export default Home;

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Layout2 from '../Layouts/Layout2';

const Topics = ({ match }) => (
  <Layout2>
    <div>
      <h3>topics</h3>
    </div>
  </Layout2>
);

export default Topics;