如何在 React 中渲染部件

Question

您好，我目前正在做 Spotify 克隆编码。 如果您按侧边栏上的菜单，我希望呈现它旁边的白色背景。 我该怎么做？

  <SideBackground>
            <LogoImg src="https://music-b26f.kxcdn.com/wp-content/uploads/2017/06/635963274692858859903160895_spotify-logo-horizontal-black.jpg"/>

            <Link to="/">
                <Option Icon={HomeIcon} title="Home"></Option>
            </Link>
            <Link to="/search">
                <Option Icon={HomeIcon} title="Search"></Option>
            </Link>
            <Link to="/library">
                <Option Icon={HomeIcon} title="Library"></Option>
            </Link>

            <StringTitle>PLAYLIST</StringTitle>

            <Line />

            {playList.map(({ name }) => (
            <PrintList>{name}</PrintList>
            ))}
            
  </SideBackground>

上面的代码是侧边栏代码。

<Router>
     <Switch>
          <Route exact path="/" component={Main}/>
          <Route exact path="/search" component={Search}/>
          <Route exact path="/library" component={Library} />
     </Switch>
</Router>    

以上代码是app中连接路由器的代码。

目前的代码，部分渲染整个页面是改的，不是这样的。

Answer 1

您可以在 react-router-dom 中使用 sidenav 功能。

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

// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.

// We are going to use this route config in 2
// spots: once for the sidebar and once in the main
// content section. All routes are in the same
// order they would appear in a <Switch>.
const routes = [
  {
    path: "/",
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  {
    path: "/bubblegum",
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  {
    path: "/shoelaces",
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
];

export default function SidebarExample() {
  return (
    <Router>
      <div style={{ display: "flex" }}>
        <div
          style={{
            padding: "10px",
            width: "40%",
            background: "#f0f0f0"
          }}
        >
          <ul style={{ listStyleType: "none", padding: 0 }}>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/bubblegum">Bubblegum</Link>
            </li>
            <li>
              <Link to="/shoelaces">Shoelaces</Link>
            </li>
          </ul>

          <Switch>
            {routes.map((route, index) => (
              // You can render a <Route> in as many places
              // as you want in your app. It will render along
              // with any other <Route>s that also match the URL.
              // So, a sidebar or breadcrumbs or anything else
              // that requires you to render multiple things
              // in multiple places at the same URL is nothing
              // more than multiple <Route>s.
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                children={<route.sidebar />}
              />
            ))}
          </Switch>
        </div>

        <div style={{ flex: 1, padding: "10px" }}>
          <Switch>
            {routes.map((route, index) => (
              // Render more <Route>s with the same paths as
              // above, but different components this time.
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                children={<route.main />}
              />
            ))}
          </Switch>
        </div>
      </div>
    </Router>
  );
}

请阅读react-router-dom-sidenav