Javascript 将导航栏组件与多个组件一起重新使用

我有一个简单的问题。使用react router将导航栏与多个组件一起使用的最佳方式是什么？让我把代码给你看，这样你就能明白我想说什么了

import React from "react";
import "./App.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";

import Auth from "./website/Auth/Auth";
import SocialMedia from "./website/SocialMedia/SocialMedia";
import SingleUser from "./website/SingleUser/SingleUser";
import Search from "./website/Search/Search";
import SinglePhoto from "./website/SinglePhoto/SinglePhoto";

import Navbar from "./components/Navbar/Navbar";

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Auth}>
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
        <Navbar>
          <Route exact path="/profile/:id" component={SingleUser} />
          <Route exact path="/socialmedia" component={SocialMedia} />
          <Route exact path="socialmedia/search" component={Search} />
          <Route exact path="socialmedia/photo/:id" component={SinglePhoto} />
        </Navbar>
      </Switch>
    </Router>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
从“/website/Auth/Auth”导入身份验证；
从“/website/SocialMedia/SocialMedia”导入社交媒体；
从“/website/SingleUser/SingleUser”导入SingleUser；
从“/website/Search/Search”导入搜索；
从“/website/SinglePhoto/SinglePhoto”导入SinglePhoto；
从“/components/Navbar/Navbar”导入导航栏；
函数App（）{
const logIn=JSON.parse（localStorage.getItem（“令牌”）；
返回(
{登录？：}
);
}
导出默认应用程序；

所以我必须重用我的

Navbar

组件，我尝试使用

，然后使用下面的其他路径，但这不起作用，当我放置

时，其他组件会出现，但我重用

Navbar

组件的方式是这样的吗

谢谢你的时间

从“React”导入React；
import React from "react";
import "./App.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";

import Auth from "./website/Auth/Auth";
import SocialMedia from "./website/SocialMedia/SocialMedia";
import SingleUser from "./website/SingleUser/SingleUser";
import Search from "./website/Search/Search";
import SinglePhoto from "./website/SinglePhoto/SinglePhoto";

import Navbar from "./components/Navbar/Navbar";

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Auth}>
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
        <Route Component={Navbar}>
          <Route exact path="/profile/:id" component={SingleUser} />
          <Route exact path="/socialmedia" component={SocialMedia} />
          <Route exact path="socialmedia/search" component={Search} />
          <Route exact path="socialmedia/photo/:id" component={SinglePhoto} />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

导入“/App.css”；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
从“/website/Auth/Auth”导入身份验证；
从“/website/SocialMedia/SocialMedia”导入社交媒体；
从“/website/SingleUser/SingleUser”导入SingleUser；
从“/website/Search/Search”导入搜索；
从“/website/SinglePhoto/SinglePhoto”导入SinglePhoto；
从“/components/Navbar/Navbar”导入导航栏；
函数App（）{
const logIn=JSON.parse（localStorage.getItem（“令牌”）；
返回(
{登录？：}
);
}
导出默认应用程序；

---

试试这个

如果希望

导航栏

仅在某些路线上渲染，则仅在某些路线上渲染。将

导航栏

渲染到

开关

外部的路径中，并在道具上的数组中指定要渲染的所有路径

补充说明：

在

开关

组件中，顺序和路径特定性很重要，请重新排序您的路由，在不太特定的路径之前指定更特定的路径。这允许您无需为每条路线指定

确切的

道具

不要在一条

路线上同时指定
组件
道具和渲染
子项
，请参阅。只需将
重定向
或
Auth
组件作为子组件呈现即可

代码：

函数应用程序（）{
const logIn=JSON.parse（localStorage.getItem（“令牌”）；
返回(
{登录？：}
);
}

也许您可以澄清“重用导航栏”对您意味着什么，期望的输出应该是什么。是否只想为某些路线渲染导航栏？如果你能分享你的

Navbar

组件，我们会很好的，这样我们就可以看到它是什么以及如何呈现的，这也可能是有用的信息。我只想让Navbar出现在某些路径中感谢你的回答@MikeAlejandro在这里有一个答案帮助解决了你的问题吗？是的，Drew，他们都帮助了我，我在发帖后几个小时自己做了一个解决方案，答案不断出现，所以我也阅读了他们，写更好的代码很酷，但答案是肯定的

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Route
        path={["/profile", "/socialmedia"]}
        component={Navbar}
      />
      <Switch>
        <Route path="/profile/:id" component={SingleUser} />
        <Route path="socialmedia/photo/:id" component={SinglePhoto} />
        <Route path="socialmedia/search" component={Search} />
        <Route path="/socialmedia" component={SocialMedia} />
        <Route path="/">
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
      </Switch>
    </Router>
  );
}