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コンポーネント

助けてください。

回答 2 件
  • これで、質問にさらに情報を追加しました。具体的には、 AppRouterPrivateRouter そして 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

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

    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>;
    
    

あなたの答え