根據當前路徑在ReactRouter中設定活動鏈接 -有解無憂

使用React Router和Material UI，我試圖根據當前的URL路徑來設定導航項的選擇狀態。如果用戶來到一個特定的頁面，它應該設定側邊欄中相應鏈接的選擇狀態。

這是目前的設定，但不確定我缺少什么屬性來使用React Router根據URL路徑設定活動狀態

data.navigation

"navigation"/span>:[
        {
            "標簽":"簡介"。
            "path": "/"。 
        },
        {
            "標簽":"第二頁"。
            "path": "pagetwo".
        }
]

import {BrowserRouter as Router, 路由, 鏈接, 開關}。from 'react-router-dom'。

const [selectedIndex, setSelectedIndex] = useState（0）。

const handleListItemClick = (event, index) => {
   setSelectedIndex（index）。
};

{data && data.navigation.map((item, i) =>/span>
      < Link key={i} to={`${item。 path}`} className={classes.link}>。
        < ListItem button selected={selectedIndex === i} onClick={（event） =>  handleListItemClick(event, i)}>
          <ListItemText className={classes. navLink}>{item.label}</ListItemText>。
        </ListItem>/span>
      </Link>
 )}

uj5u.com熱心網友回復：

這是我為獲得這個作業而設定的一個樣本。我必須保持exact以使其作業。

https://stackblitz.com/edit/react-wvhugc?file=src/App.js

import React from  react';
import './style.css'。
import {
  BrowserRouter as Router,
  Switch。
  Route。
  NavLink。
} from 'react-router-dom'。
import ListItemText from '@mui/material/ListItemText'。
import ListItem from '@mui/material/ListItem';

export default function App（） {
  const navigation = [
    {
      label: 'Introduction',
      path: '/'。
    },
    {
      label: '第二頁'。
      path: '/pagetwo'。
    },
  ];
  return (
    <Router>/span>
      {navigation.map((item, i) => (
        <NavLink
          exact[/span
          activeStyle={{}。
            fontWeight: 'bold' 。
            color: 'red',
          }}
          key={i}。
          to={`${item.path}`}。
        >
          <ListItem button>/span>
            <ListItemText>{item.label}</ListItemText> 
          </ListItem>/span>
        </NavLink>/span>
      ))}
      <Switch>))}<Switch>
        <Route exact path="/"/span>>
          <div>Home</div>/span>
        </Route>/span>
        <Route path="/"> 
          <div>第2頁</div>/span>
        </Route>/span>
      </Switch>/span>
    </Router>
  );
}

uj5u.com熱心網友回復：

如果你讓每個鏈接成為一個組件，你可以使用useRouteMatch，就像在React Router檔案中的 "自定義鏈接 "例子

。

function NavigationLink(props) {
  const match = useRouteMatch（{
    to: props.path,
  });

  //update the link class to set styles appropriately depending upon
  ///取決于active是真還是假。
  const classes = useStyles({ active: match != null })。

  return (
    <Link to={props. path} className={classes.link}>。
      <ListItem button selected={props. selected} onClick={props.onClick}> 
        <ListItemText className={classes. navLink}>{props.children}</ListItemText>。
      </ListItem>/span>
    </Link>
  );
}

///在你現有的組件中
data.navigation.map((item, i) =>  (
  <NavigationLink。
    key={i}
    path={item.path}
    selected={selectedIndex === i}
    onClick={(event)=> handleListItemClick(event, i)}。
  >
    {item.label}
  </NavigationLink> 
));

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/332291.html

標籤：

上一篇：如何從父組件向子組件傳遞函式，型別為assingable

下一篇：過濾Json資料，沒有結果