ネストされたルーティングとマテリアル-UIリストが機能しない

bugfix> reactjs > 投稿

問題があります。サイドバーでmaterial-uiを使用していますが、ルートが機能していません。これは私のコードです：

import React, { useState } from "react";
import { NavLink as RouterLink } from "react-router-dom";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
export const Sidebar = (props) => {
  const { menu } = useSelector((state) => state);
  const [selectedIndex, setSelectedIndex] = useState(1);
  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };
  return (
    <List component="nav">
      {menu.map((text, index) => (
        <ListItem
          key={text.id}
          selected={selectedIndex === text.id}
          onClick={(event) => handleListItemClick(event, text.id)}
          component={RouterLink}
          to={text.url}
          button
        >
          .....
        </ListItem>
      ))}
    </List>
  );
};

メニューをクリックすると、ページ全体が再読み込みされます。

これはHTMLです

SessionRouter-これは私がサイドバーと呼ぶコンポーネントです

AppRouter-これは私がSessionRouterを呼び出す場所です

PrivateRouteコンポーネント

助けてください。

reactjs

material-ui

react-router-dom

回答 2 件

  • これで、質問にさらに情報を追加しました。具体的には、 AppRouter 、 PrivateRouter そして SessionRouter 、私はあなたの問題を再現することができました。 React RouterDom-ネストの例に基づいて答えます

    ご覧のとおり、この例はコードと多少同じです。構造は次のとおりです。

    主要コンポーネント（あなたの場合： AppRouter 、例では： NestingExample ） とともに Router それはすべてを包みます Switch 一部で Route の。

    2番目のコンポーネント（あなたの場合： SessionRouter 、例では： Topics ）より多くの情報（あなたの場合はリンクなどのサイドバーです）と別の情報があります Switch 異なる Route 最初のものからです。

    ページの例では useRouteMatch 取得するには url そしてその path ただし、「基本ルート」は「/」であるため、これは実際には必要ありません。したがって、穴の画像を見ると、「ルーティング」構造がreact-router-domページの例とまったく同じであることがわかります。しかし、少し詳細があります。これについては、ページの例で次のことを試してみてください。 NestingExample 関数を追加します exact 「トピック」への小道具 Route 、 このような：

    <Switch>
     <Route exact path="/">
         <Home />
     </Route>
     <Route exact path="/topics">
         <Topics />
     </Route>
</Switch>

    いずれかのトピックをクリックしてみると、同じ問題であることがわかります。 だから、これで、私の提案は追加することです exact={false} に小道具 PrivateRoute のコンポーネント AppRouter （あなたが持っているので ...rest ）

  • これを修正するには、合格することができます url に handleListItemClick ボタンをクリックすると、履歴ライブラリのメソッドプッシュを使用してページを変更できます。

    const handleListItemClick = (event, index, url) => {
  setSelectedIndex(index);
  history.push(url);
};

    そして、あなたはのレンダリングを更新する必要があります ListItem ：

    <ListItem
  key={text.id}
  selected={selectedIndex === text.id}
  onClick={(event) => handleListItemClick(event, text.id, text.url)}
  component={RouterLink}
  to={text.url}
  button
>
  .....
</ListItem>;

あなたの答え

関連記事