react-router-dom 6.x 版改动的坑

  • Post author:
  • Post category:其他




前言

✋🏻 先,说一下我为什么发这么一篇文章。一个月前刚用过react的路由插件。当时用了之后也没有什么报错。然后今天用,遇到了好多问题。后来才发现是更新了版本,好多用法都改变了。所以想写篇文章梳理一下,同时也让能看到这篇文章的 🐻 🌏 们,少百度一些报错。

我去npm官网看了下react-router-dom的发布版本,在最近一个月内一直在改动着。

image.png



遇到的报错



❌ 1.

在使用

<Switch>

时,报错如下:

import logo from './logo.svg';
import './App.css';
import {BrowserRouter, Route, Routes, Switch} from 'react-router-dom';
import Home from './pages/Home/index';
import Login from './pages/login';
import Register from './pages/register'
import Nav from './pages/navigator'
function App() {
  return (
    <div className="App"> 
      <BrowserRouter>
        <Nav/>
        <Switch>
          <Route path="/" exact element={<Home/>} />
          <Route path="/login" exact element={<Login/>} />
          <Route path="/register" exact element={<Register/>} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

image.png

翻译一下:就是在 react-router-dom 中没有导出

<Switch>


因为在v6版本中,

<Switch>

被换成了

<Routes>



❌ 2.

在Route配置了path的路径 和 component的组件,依旧无法跳转。

<Route path="/register" exact component={Register} /> 

image.png

警告说,route

register

路径没有匹配到

element

,这意味着它什么都不会渲染。


因为在v6中,

component

属性被替换成了

element

,并且需要传带标签的组件而不只是组件名称

 <Route path="/" exact element={<Home/>} />



❌ 3.

这个错误跟v6没什么关系。主要是我没去度过 react-router-dom的语法,都是复制用的。

image.png

我把导航写到了

<BrowserRouter>

外面,同时 Nav 组件中又使用了


react-router-dom



Link

组件。

App.js

   <Nav/>
   <BrowserRouter>
        <Routes> 
          <Route path="/" exact element={<Home/>} />
          <Route path="/login" exact element={<Login/>} />
          <Route path="/register" exact element={<Register/>} />
        </Routes>
      </BrowserRouter>

nav.jsx

     <ul className="nav navbar-nav">
                <li className="active">
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/register">SVN</Link>
                </li>
                <li className="dropdown">
                  <Link to="/login" className="dropdown-toggle" data-toggle="dropdown">
                    Java
                  </Link>
                </li>
          </ul>

我们下篇文章详细学一下React Router



版权声明:本文为qq_39008205原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。