前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-router-dom 6.x 版本 让我🐓 🐝 了

react-router-dom 6.x 版本 让我🐓 🐝 了

作者头像
用户4793865
发布2023-01-12 15:25:05
5540
发布2023-01-12 15:25:05
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym

这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战

前言

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

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

image.png
image.png

遇到的报错

❌ 1.

在使用 <Switch>时,报错如下:

代码语言:javascript
复制
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
image.png

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

因为在v6版本中,<Switch>被换成了<Routes>

❌ 2.

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

代码语言:javascript
复制
<Route path="/register" exact component={Register} /> 
image.png
image.png

警告说,routeregister路径没有匹配到 element,这意味着它什么都不会渲染。

因为在v6中,component属性被替换成了element,并且需要传带标签的组件而不只是组件名称

代码语言:javascript
复制
 <Route path="/" exact element={<Home/>} />

❌ 3.

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

image.png
image.png

我把导航写到了<BrowserRouter>外面,同时 Nav 组件中又使用了 react-router-domLink组件。

App.js

代码语言:javascript
复制
   <Nav/>
   <BrowserRouter>
        <Routes> 
          <Route path="/" exact element={<Home/>} />
          <Route path="/login" exact element={<Login/>} />
          <Route path="/register" exact element={<Register/>} />
        </Routes>
      </BrowserRouter>

nav.jsx

代码语言:javascript
复制
     <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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 遇到的报错
    • ❌ 1.
      • ❌ 2.
        • ❌ 3.
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档