react-router-dom使用navLink的activeStyle报错

使用react-router-dom V6报错

React does not recognize the `activeStyle` prop on a DOM element. 

我的代码：

import { NavLink } from "react-router-dom"
import "./HomePages.css"

const selectedStyle = {
  backgroundColor: "white",
  color: "slategray"
}

export const Home = () => 
  <nav className="home">
    <NavLink to="/">[Home Page]</NavLink>
    <NavLink to="/about" activeStyle={selectedStyle}>[About]</NavLink>
    <NavLink to="/events" activeStyle={selectedStyle}>[Events]</NavLink>
    <NavLink to="/products" activeStyle={selectedStyle}>[Products]</NavLink>
    <NavLink to="/contact" activeStyle={selectedStyle}>[Contact Us]</NavLink>
  </nav>

点这里，解决方案来源！！！！！！！

是因为使用的react-router-dom的版本太高了，这个版本不支持activeStyle，使用activeClassName属性也会报这个错误。降低react-router-dom的版本即可。

 cnpm i  react-router-dom@5.0.1  --save

其他注意点

react-router-dom V5版本

注册路由：

1. 使用switch组件实现404页面的跳转
2. 注册路由的写法为<Route exact path="/" component={Home}></Route>

import React from 'react'
import {HashRouter, Route, Switch} from 'react-router-dom'
import { Home, About, Events, Products, Contact, Whoops404 } from './components/HomePages'
window.React = React

const App = () => 
  <HashRouter>
    <div className='main'>
      {/* 1. switch组件只会显示首个匹配的路由，如果没有匹配路由，则最后一个Whoops404组件会被显示 */}
      <Switch>
        {/* 2. 组件通过componet={组件名}来实现 */}
        <Route exact path="/" component={Home}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/events" component={Events}></Route>
        <Route path="/products" component={Products}></Route>
        <Route path="/contact" component={Contact}></Route>
        <Route component={Whoops404}></Route>
      </Switch>
    </div>
  </HashRouter>

export default App

react-router-dom V6版本

注册路由：

1. V6版本没有Switch组件
2. <Route>组件需要有<Routes>组件包裹
3. 注册路由的写法为<Route exact path="/" element={<Home />}></Route>

import React from 'react'
import {HashRouter, Route, Routes} from 'react-router-dom'
import { Home, About, Events, Products, Contact, Whoops404 } from './components/HomePages'
window.React = React

const App = () => 
  <HashRouter>
    <div className='main'>
      <Routes>
        {/* 2. 组件通过element={<组件名 />}来实现 */}
        <Route exact path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/events" element={<Events />}></Route>
        <Route path="/products" element={<Products />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
        <Route element={<Whoops404 />}></Route>
      </Routes>
    </div>
  </HashRouter>

export default App