使用来自react-router-dom的路由时，ReactDOM渲染出错
在使用 react-router-dom 进行路由配置时，如果遇到 ReactDOM 渲染出错，可能是由于以下几个原因导致的：
基础概念
react-router-dom 是 React 应用中用于实现客户端路由的库。它允许你在不同的 URL 下渲染不同的组件，从而实现单页应用（SPA）。
常见问题及原因
- 版本不兼容：
react-router-dom的版本可能与你的 React 版本不兼容。 - 错误的导入方式：可能导入了错误的模块或使用了错误的语法。
- 缺少必要的依赖：可能没有安装
react-router-dom或其他必要的依赖。 - 路由配置错误：路由配置可能有误，导致无法正确渲染组件。
解决方法
以下是一些常见的解决方法：
1. 检查版本兼容性
确保 react-router-dom 的版本与你的 React 版本兼容。例如，如果你使用的是 React 17，你应该使用 react-router-dom 的 5.x 或 6.x 版本。
npm install react-router-dom@52. 正确的导入方式
确保你正确导入了 react-router-dom 中的模块。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';3. 安装必要的依赖
确保你已经安装了 react-router-dom 和其他必要的依赖。
npm install react-router-dom4. 检查路由配置
确保你的路由配置是正确的。以下是一个简单的路由配置示例：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>,
document.getElementById('root')
);示例代码
以下是一个完整的示例代码，展示了如何正确配置 react-router-dom：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>,
document.getElementById('root')
);
// Home.js
import React from 'react';
const Home = () => {
return <h1>Home Page</h1>;
};
export default Home;
// About.js
import React from 'react';
const About = () => {
return <h1>About Page</h1>;
};
export default About;参考链接
通过以上步骤，你应该能够解决 ReactDOM 渲染出错的问题。如果问题仍然存在，请检查控制台中的错误信息，以便进一步诊断问题。
相关·内容
当我尝试使用来自'react-router-dom‘的路由时，我在屏幕上看到这个错误。 错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: object。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查Router.Consumer的render方法。 3 | import App from './serviceWorker';
浏览 41提问于2021-08-10得票数 0
回答已采纳
我第一次尝试使用路由，并遵循来自的确切指示import { Route } from "react-router-dom"; </Route> );文件index.js
import ReactDOMfrom
浏览 4提问于2021-11-03得票数 98
当我通过历史的push方法更改路由时，没有重新渲染。通过使用history.push方法import React from 'react';import { Provider } from 'react-redux';
import { Router, Route } fro
浏览 0提问于2019-11-26得票数 0
1回答
当我点击提交按钮时，我需要重定向到这个页面的pageOne，所以我搜索并找到了一个反应路由器，并使用了这行this.props.history.push("/anotherPage");，但它不是重定向下面提供了我的代码片段和沙箱。 https://codesandbox.io/s/material-demo-n9o7s <!
浏览 11提问于2019-05-31得票数 2
回答已采纳
如何使用react路由器dom v6库保护路由？我正在用reactjs创建我的第一个应用程序，我想知道如何保护路由，在这种情况下，在/ dashboard /中找到的所有路由都只能输入具有凭证的用户，也就是注册的用户。：渲染时没有返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，请返回null。公共路线(任何人都可以看到这些页面)
私有路由(当
浏览 4提问于2021-11-15得票数 1
回答已采纳
3回答
我来自Angular框架的React，我对路由器库感到困惑。我试图创建登录页面作为我的应用程序中的一个单独的页面，这是应该包含导航和页脚，这是主的一部分。
import '.react-router-dom库。所以主要的想法是，我希望加载没有导航栏和页脚的/logi
浏览 8提问于2019-11-23得票数 0
回答已采纳
2回答
{this.getForm()} <br /> </div> } 问题是当条件满足时，/App.css";import Login from ".： import React from "
浏览 19提问于2020-09-20得票数 1
回答已采纳
我不会对它使用React。但是在主页上有一个我使用React的游戏页面的链接。我需要在游戏页面上创建应用程序，但webpack(我认为)可以渲染应用程序只在index.html.上我有渲染在游戏页面上的容器。但是react忽略了它。另一方面，当我在主页上为rander创建容器时，一切都是正常的。/components/ElectronApp';
HashRouter,} from
浏览 1提问于2018-12-17得票数 0
试图升级反应-路由器从2到4，并打破它，现在不能渲染我的应用程序。/路由呈现得很好，但是当我刷新并表示Cannot GET /randomRoute时，所有其他路由都会崩溃。我正在创建一个react应用程序，我的主要index.js文件(其中包括ReactDOM.render)也包括路由，如下所示：import ReactDOM</
浏览 1提问于2017-07-04得票数 4
回答已采纳
我正在尝试设置一个新的react应用程序。import React from 'react';import { BrowserRouteras Router, Route, Switch } from 'react-router-dom';
import './
浏览 16提问于2019-10-24得票数 1
回答已采纳
我需要在两个路径之间进行路由，我安装了npm install react-router (RES-路由器: 6.2.1和router: 5.2.0)。useRoutes() may be used only in the context of a <Router> component.中说了一个错误，这最终意味着我没有用BrowserRouter扭曲我的index.js代码：index.js
import {BrowserRouter as Router} from "react-router-dom</em
浏览 46提问于2021-12-20得票数 4
回答已采纳
1回答
我想通过一个应用程序中的app组件进行路由，使用浏览器路由和反应性路由器-dom的路由，但是会出错。/BrowserRouter> 45 | );import React from 'react';import {Browser
浏览 0提问于2019-05-09得票数 1
回答已采纳
2回答
我试图设置路由器和渲染来改变页面，但是它给了我一些我无法理解的错误。import ReactDOM from 'react-dom';import {BrowserRouter} from &qu
浏览 9提问于2022-02-16得票数 2
回答已采纳
我正在建立一个基本的反应应用程序，在其中点击一个按钮应该打开一个新的页面在同一选项卡。我已经使用了React路由器，但这并不适用于我。我想重定向到一个州，比如说，localhost/test，这是我的index.jsimport { Route } from 'react-router-dom';
const myFirstElement = <&
浏览 4提问于2022-06-22得票数 1
回答已采纳
3回答
每当我尝试浏览像"/about“这样的路径时，浏览器中的路径会是这样的："”。我有主页了。反应路由器并没有指引我到想要的路径。var React = require('react');var Router = re
浏览 3提问于2017-07-14得票数 1
回答已采纳
1回答
当我运行它(打开一个新的选项卡，加载应用程序，而不是刷新)，我希望这个应用同时呈现主组件和计时器组件，但是应用程序只呈现主组件，我看到一个只有Nav组件的空白页面已经呈现。我试着使用IndexRoute，但是我发现了一个奇怪的错误，它对我没有用。这是我的密码：import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Ro
浏览 1提问于2017-06-19得票数 0
回答已采纳
我有一个导航条，它在每个路由中呈现，而路由在单击时发生变化。import { Link } from 'react-router-dom';
constructor';
<Router&g
浏览 14提问于2021-12-03得票数 66
我的react路由器出现了意外的行为。import React from 'react'import ReactDOM from 'react-dom'
import Routes from '.&#x
浏览 8提问于2020-04-15得票数 0
1回答
我有一条没有渲染的路由。这可能是个菜鸟问题，但我已经试过了。使用最新版本的React、react-route-dom和es6。我的App.js：import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom</em
浏览 11提问于2017-07-03得票数 0
0回答
我正在尝试使用v4 react路由器，但该路由器始终呈现初始路径('/')。我正在使用react-dom: ^16.2.0当我尝试呈现/#/account时，它呈现Home而不是Account。import React from "react"
import ReactDOM from "react-dom&
浏览 1提问于2017-12-03得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
