React-Router-Dom:不显示页面内容
基础概念
React Router 是 React 应用中用于实现路由管理的库。它允许你在不同的 URL 下显示不同的组件，从而实现单页应用（SPA）。React Router-Dom 是 React Router 的 DOM 版本，专门用于浏览器环境。
相关优势
- 声明式路由：通过声明式的方式定义路由，代码更简洁易读。
- 嵌套路由：支持嵌套路由，方便构建复杂的页面结构。
- 动态路由：支持动态路由匹配，可以根据 URL 参数渲染不同的组件。
- 历史管理：内置了 HTML5 历史 API，可以方便地进行页面跳转和回退。
类型
React Router-Dom 主要提供了以下几种组件：
- BrowserRouter：基于 HTML5 历史 API 的路由组件。
- HashRouter：基于 URL 哈希值的路由组件。
- Route：用于定义路由规则。
- Switch：用于匹配多个路由规则，只渲染第一个匹配的路由。
- Link 和 NavLink：用于创建导航链接。
应用场景
React Router-Dom 适用于需要在 React 应用中实现页面导航和路由管理的场景，特别适用于单页应用（SPA）的开发。
问题分析
如果你在使用 React Router-Dom 时遇到页面内容不显示的问题，可能是以下几个原因：
- 路由配置错误：路由规则定义不正确，导致无法匹配到正确的组件。
- 组件渲染问题：组件本身存在问题，导致无法正常渲染。
- 路径匹配问题：当前 URL 路径与路由规则不匹配。
- 缺少必要的依赖：没有正确安装或引入 React Router-Dom。
解决方法
以下是一些常见的解决方法：
1. 检查路由配置
确保你的路由配置正确无误。例如：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
export default App;2. 检查组件渲染
确保你的组件能够正常渲染。例如：
// Home.js
import React from 'react';
function Home() {
return <div>Home Page</div>;
}
export default Home;3. 检查路径匹配
确保当前 URL 路径与路由规则匹配。例如，如果你访问 /about，应该能看到 About 组件的内容。
4. 检查依赖
确保你已经正确安装并引入了 React Router-Dom。例如：
npm install react-router-dom然后在你的入口文件中引入：
import 'react-router-dom';示例代码
以下是一个完整的示例代码，展示了如何使用 React Router-Dom 实现简单的路由管理：
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</Router>
);
}
export default App;// Home.js
import React from 'react';
function Home() {
return <div>Home Page</div>;
}
export default Home;// About.js
import React from 'react';
function About() {
return <div>About Page</div>;
}
export default About;参考链接
通过以上步骤，你应该能够解决 React Router-Dom 页面内容不显示的问题。如果问题依然存在，建议检查控制台是否有错误信息，并根据错误信息进一步排查问题。
相关·内容
我正在学习如何使用ReactJS，我已经安装了react-router-dom。</Nav> </Container> ) 现在我的问题是，App.js只显示主页内容，如果我单击团队文本上的NavBar，url会更改(变为Home.js :3000/ Team )，但页面内容始终是团队内容。当我点击N
浏览 62提问于2020-11-10得票数 0
回答已采纳
3回答
然而，当我提交并尝试重定向到/results页面时，该页面链接到一个组件，该组件在被定向到时显示搜索结果，但它重定向到结果页面，并且我无法显示搜索结果。这是我的代码。
浏览 2提问于2019-11-26得票数 0
以下内容不起作用: React路由器"Link“不工作。**当我通过输入URL进入正确的页面时，它是空的。但是，在测试页面时，当我没有使用任何Reactive路由器路由时，页面运行良好，所以我认为问题在于路由**。import { Link } from 'react-ro
浏览 2提问于2021-06-07得票数 0
回答已采纳
反应有点新奇&我正在尝试创建一个简单的线性页面流。当在Login组件中单击该链接时，我希望它转到Select页面，而不显示前一页面。在当前状态下，该链接只是添加Select页面，而不刷新任何内容。import React from "react"; BrowserRouter as Router, Route,} from "react-route
浏览 132提问于2021-10-27得票数 0
import { BrowserRouter } from 'react-router-dom'; <div> </div> );我想在标题页面上显示内容当它没有包装内容时，如果页面</em
浏览 4提问于2022-11-28得票数 0
我是新的网页开发，但我已经建立了一个网站使用的反应，我不知道如何添加一个网页到它。我是在app.js中添加它，还是需要另一个文件？有什么例子可以解释这一点吗？
浏览 4提问于2022-07-13得票数 0
1回答
我正在尝试使用react-router-dom进行路由。昨天我的项目仍然正常工作，但是在我用github页面部署它之后，它突然崩溃了。这是Tmp.js的内容import { Button } from "react-bootstrap";
</d
浏览 2提问于2022-03-22得票数 0
我使用的是“react路由器-dom”："^5.2.0"，
const history = useHistory
浏览 5提问于2021-08-01得票数 5
回答已采纳
我想重定向一个页面时，用户按下链接，它应该重定向该页面，但当用户被重定向时，链接按钮仍然留在那里，只有新的页面组件在那里打印。import React, { Component } from 'react';import React,{Component} from 'react';
import {BrowserRo
浏览 3提问于2018-02-22得票数 0
2回答
我的React Router不渲染我的组件。但是它们可以通过硬刷新来访问。它会更改URL和所有内容，但在我点击F5之前什么都没有显示。当我将所有内容都放在一个组件中时，它工作得很好，但后来我尝试将它拆分成几个组件，现在除了在不同页面中呈现内容之外，所有内容都可以工作。 我做错了什么？ 在我包装的index.js中。App.js import React from "react";
import { BrowserRouter as Router }
浏览 22提问于2020-09-17得票数 1
回答已采纳
我正在使用react来列出商店，当用户点击商店时，它将只显示菜单，而不显示其他任何内容。我面临的问题是，每次我点击一个商店，菜单就显示在商店列表的正下方。我希望它呈现为一个新的页面，除了菜单什么都没有。有没有办法可以用react路由器做到这一点？下面是我的代码。
浏览 0提问于2020-12-02得票数 1
1回答
当我单击FormStatus页面中的一个按钮时，我想在新页面中打开Form。下面是我的密码。import Form from "./components/FormStatus"; </div>
</Router&
浏览 3提问于2020-11-11得票数 1
回答已采纳
添加react-router-dom后，我将其推送到GitHub https://github.com/iamtheasad/user。在项目https://iamtheasad.github.io/中，我的主页显示https://iamtheasad.github.io/user/，之后我点击另一个菜单项，它重定向到另一个页面，但当我刷新另一个页面时，它显示404页面，单击主页
浏览 15提问于2020-04-13得票数 0
/components/Navbar';import/Projects’中的代码： import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-domfunction Projects()
浏览 9提问于2021-11-17得票数 0
2回答
import React from 'react'; import {Route, BrowserRouter as Router, Switch} from "react-router-dom";
function App() {<Route path="/" compone
浏览 0提问于2020-11-02得票数 0
1回答
在半页内响应路由器导航
、、、
默认情况下，第一个页面应该包含以下组件
import React, { Component } from 'react';
import {Brow
浏览 1提问于2017-09-13得票数 1
我一直在练习如何使用最新的模块版本，所以我目前正在尝试使用react-router-dom。它不会呈现页面组件的确切路径，而是呈现在主页上。我尝试使用react-router-dom的其他版本，但仍然得到相同的结果。//App.js fileimport {BrowserRouter as Router, Route} from 'react-router-dom我还发现通常有一个自动完成选项(它显示
浏览 1提问于2019-11-11得票数 0
当用户重新加载或引用当前页面时，我想将用户重定向到菜单页面。Menu.js：import { useHistory } from "react-router-dom";
);MyComponent.js：import { useHistory } f
浏览 138提问于2021-02-18得票数 1
回答已采纳
假设我们点击了About Us按钮，我们被定向到一个不同的页面，但它不是从顶部加载的。我们必须向上滚动才能看到从头开始的内容。目前，我的代码的工作方式是先定向到不同的页面，然后滚动到顶部。如何才能在不滚动的情况下将页面定向到顶部。import { useEffect } from 'react';
function ScrollToTop
浏览 34提问于2021-08-19得票数 0
当有人点击登录或注册，用户将进入登录或注册页面，以填写他们的线人。PrivateRounte.jsimport { Route, Redirect } from "react-router-dom
浏览 0提问于2019-08-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
