react-router-domV6版本改版踩坑

1.注册路由:
v5版本：

import { Route } from 'react-router-dom'
<Route path="/about" component={About} />
<Route path="/home" component={Home} />

v6版本：

import { Route,Routes } from 'react-router-dom'
<Routes>
	<Route path="/about" element={<About />} />
	<Route path="/home" element={<Home />} />
<Routes>

2.NavLink点击高亮显示
v5版本：

import { NavLink } from 'react-router-dom'
<NavLink activeClassName="highlight" className="about"  to="/about" >About</NavLink>

v6版本：

以下二者选一即可，一定要注意 （isActive ? " highlight"） highlight前面的空格！！！
// 官方写法
<NavLink className={({ isActive }) => "about" + (isActive ? " highlight" : "")} to="/about">About</NavLink>
// ES6 模版字符串写法 
<NavLink className={({ isActive }) => `about ${isActive ? "highlight" : ""}`} to="/about">About</NavLink>