React Router V4 是一个用于构建单页应用程序的流行的路由库。它提供了一种简洁的方式来管理应用程序中的不同页面之间的导航。与此同时，Material UI 是一个流行的 UI 组件库，提供了现代化和美观的用户界面元素。在这篇文章中，我们将探讨如何在 React Router V4 中使用 Material UI 的 ListItem 组件来实现 NavLink 的效果。

shell
npm install react-router-dom @material-ui/core

shell
yarn add react-router-dom @material-ui/core

jsx
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import { ListItem, ListItemText, List } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

jsx
const useStyles = makeStyles({
  active: {
    fontWeight: 'bold',
  },
});
const Navigation = () => {
  const classes = useStyles();
  return (
    
      
        
      
      
        
      
      
        
      
    
  );
};

jsx
const App = () => {
  return (
    
      
      
      
      
    
  );
};

jsx
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import { ListItem, ListItemText, List } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  active: {
    fontWeight: 'bold',
  },
});
const Navigation = () => {
  const classes = useStyles();
  return (
    
      
        
      
      
        
      
      
        
      
    
  );
};
const Home = () => {
  return 
首页
;
};
const About = () => {
  return 
关于
;
};
const Contact = () => {
  return 
联系我们
;
};
const App = () => {
  return (
    
      
      
      
      
    
  );
};
export default App;