带有自定义侧边栏的 React-router-dom

Question

我是 ReacjJS 的新手，我想将 React-router-dom 与我的自定义 sidenav 一起使用。

我已经创建了侧边栏导航的样式，现在我想使用 React router dom 使按钮可单击，到目前为止我已经做到了：

Sidenav 组件：

function sidenav() {
  return (
    <div className='sidenav'>
      <ul className='sidenavList'>
      {SidenavData.map((val, key) => {
        return ( 
        <li
        key={key} 
        className="listItem" 
        id={window.location.pathname == val.link ? "active" : ""} 
        onClick={() => {
          window.location.pathname = val.link
          }}
          >
          <div id="icon">{val.icon}</div>  
          <div id="title">{val.title}</div>
          <div>{val.title}</div>
          </li>
      );
      })}
      </ul>

    </div>
  )
}

应用程序.js

function App() {
  return (
    <main>
            <Routes>
              <Route path="/dashboard" component={Dashboard} exact />
              <Route path="/kalender" component={Kalender} />
              <Route component={Error} /> 
            </Routes>
        </main>
  );
}

Answer 1

1. sideNav

   和

   App

   中的内容应位于

   <Router>

   中的相同

   react-router-dom

   组件下。
2. 您在

   component

   中定义的

   App.js

   属性的值应该是一个组件——这意味着它应该是

   component={Dashboard}

    而不是 

   element={<Dashboard />}
3. 不应使用

   onClick

   处理程序。相反，请使用

   <Link>

    中的 

   react-router-dom
组件

所有这些都已完成，这是如何让它并行工作的非常基本的想法（在示例中是垂直的，但假设您已经完成了样式设置）--

这是最小可重现代码

export default function App() {
  const SidenavData = [
    {
      link: "dashboard",
      icon: "/dashboard",
      title: "dashboard"
    },
    {
      link: "kalender",
      icon: "/Kalender",
      title: "Kalender"
    }
  ];
  function sidenav() {
    return (
      <div className="sidenav">
        <ul className="sidenavList">
          {SidenavData.map((val, key) => {
            return (
              <li
                key={key}
                className="listItem"
                id={window.location.pathname == val.link ? "active" : ""}
              >
                <Link to={`/${val.link}`}>
                  <div id="icon">{val.icon}</div>
                  <div id="title">{val.title}</div>
                  <div>{val.title}</div>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
  return (
    <main>
      <Router>
        <div>{sidenav()}</div>
        <div>
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/kalender" element={<Kalender />} />
            <Route component={Error} />
          </Routes>
        </div>
      </Router>
    </main>
  );
}

在codesandbox 中查看它的实际应用 --

https://codesandbox.io/s/react-router-sidebar-forked-hzypx8?file=/src/App.js