javascript - 在多个组件中重复使用导航栏组件

Question

我有一个简单的问题。使用 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>
        <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;

所以我必须重复使用我的 Navbar组件，我尝试使用 <Navbar /> ，然后是下面的其他路线，但这不起作用，当我输入 <Navbar> </Navbar> 时有效，其他组件也会出现，但这就是我重用我的 Navbar 的方式组件？

感谢您的宝贵时间!!

Answer 1

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;

试试这个!