首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

添加react-router-dom之后,我的github页面没有显示任何内容

添加react-router-dom之后,如果你的GitHub页面没有显示任何内容,可能是因为你没有正确配置路由或者没有定义相应的路由组件。

首先,确保你已经正确安装了react-router-dom依赖。可以通过以下命令进行安装:

代码语言:txt
复制
npm install react-router-dom

接下来,在你的应用程序的入口文件(通常是index.js或App.js)中,导入所需的组件和方法:

代码语言:txt
复制
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

然后,定义你的路由组件。你可以创建一个单独的文件来定义路由组件,或者在同一个文件中定义它们。以下是一个简单的示例:

代码语言:txt
复制
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
};

export default App;

在上面的示例中,我们定义了三个路由:根路径('/'),关于页面('/about')和未找到页面(NotFound)。你可以根据你的需求添加更多的路由。

最后,在你的应用程序的根组件中,使用Router组件将你的路由包裹起来:

代码语言:txt
复制
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default Root;

确保你的根组件被渲染到DOM中的正确位置。

如果你仍然无法在GitHub页面上看到任何内容,可能是因为你的路由配置有误或者你的路由组件没有正确渲染内容。你可以检查你的路由配置和组件代码,确保它们正确无误。

关于腾讯云相关产品,推荐使用腾讯云的云服务器(CVM)来部署你的React应用程序。你可以通过以下链接了解更多关于腾讯云云服务器的信息:

腾讯云云服务器(CVM)

希望以上信息对你有帮助!如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

「React缓存页面」从需求到开源(是怎么样让产品小姐姐刮目相看

如上图所示,当我们编辑内容时候,一些数据可能从其他页面获得,所以要求,无论切换路由,切换页面,当前页面的编辑信息均不能被置空,只有点击确定 ,重置,表单才内容置空。...react 中没有对应 keepalive内置 api,后来上GitHub上搜索相关项目,感觉有很多不符合业务需求情况。还有一些潜在风险。瞬间慌了~~~。内心有一种万只神兽奔腾感觉。 ?...1 解决方案 1 数据状态缓存到公共管理可行性 这个需求首先让想到是用redux或者是mobx来把页面的状态缓存起来,然后切换页面的时候,把这些数据缓存进去,再次切换回来时候,将数据取出来,这样就一个问题...,即便能缓存state层,但是如果一些表单组件是非受控组件,是无法缓存下来,还有一些dom状态是缓存不了,比如手动添加一些样式等。...withoutRoute >{ renderRoutes(routes) } KeepaliveRoute KeepaliveRoute 基本使用和 Route没有任何区别

1.8K20

如何测试 React 路由 ?

,所以页面不会报错,那如果当页面变量复杂,页面其中一个组件报错,就会引起白屏 例如 现在在 about 页面添加一个错误组件 import React from "react"; function...,但如果我们没有点击 about 页面,我们程序任然正常运行,所以我们需要对路由进行测试。...,我们可以添加一个通用组件来确保每个页面没有错误 import { useLocation } from "react-router-dom"; export const LocationDisplay...: 将程序和使用什么路由分开; 使用 MemoryRouter 来测试; 通过 userEvent.click 点击确保页面可以正确渲染; 提供一个公共包裹组件,通过遍历来测试每个页面,确保渲染 以上就是本文全部内容...请关注,我会尽快出 React test 系列下文。 希望这篇文章对大家有所帮助,也可以参考往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

2.1K20

如何测试 React 路由 ?

,所以页面不会报错,那如果当页面变量复杂,页面其中一个组件报错,就会引起白屏 例如 现在在 about 页面添加一个错误组件 import React from 'react' function...,但如果我们没有点击 about 页面,我们程序任然正常运行,所以我们需要对路由进行测试。...,我们可以添加一个通用组件来确保每个页面没有错误 import { useLocation } from 'react-router-dom' export const LocationDisplay...: 将程序和使用什么路由分开; 使用 MemoryRouter 来测试; 通过 userEvent.click 点击确保页面可以正确渲染; 提供一个公共包裹组件,通过遍历来测试每个页面,确保渲染 以上就是本文全部内容...请关注,我会尽快出 React test 系列下文。 希望这篇文章对大家有所帮助,也可以参考往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

2.1K20

React Router入门指南(包括Router Hooks)

} /> ); } 然后,将其添加到我们要呈现内容位置。路线组件具有多个属性。但是在这里,我们只需要路径和渲染。...path:这是route路径。在这里,我们使用 / 定义主页路径。 render:到达路由时将显示内容。在这里,我们将向用户呈现欢迎消息。...为了获得React Router全部功能,我们需要有多个页面和链接可以使用。我们已经有了页面(如果需要,也可以使用组件),现在,让我们添加一些链接以能够在页面之间进行切换。...现在,我们可以通过链接转到应用程序不同部分。但是,我们路由器存在问题。即使我们切换到其他页面,Home组件也会一直显示。...现在,让我们继续处理用户遇到不存在路由时情况。 重定向到404页面 要将用户重定向到404页面,您可以创建一个组件来显示它,但是为了使事情简单起见,将仅显示带有render消息。

12K20

React Router初学者入门指南(2023版)

不幸是,普通链接通常会触发页面刷新来显示组件,从而破坏用户体验。这就是React Router用武之地。...React Router允许您在应用程序中定义不同路由,并将它们链接到各自组件,而无需重新加载页面。这种方法使得React Router能够轻松更新页面内容,并使网站感觉像一个原生应用程序。...让我们添加一些React组件,以便在历史应用程序上获得一些虚拟内容。您只需将其复制并粘贴到App.js中,即默认应用程序组件。...这意味着每当URL路径与 /eras 匹配时,将显示 内容。...404 页面 404错误是一个HTTP状态码,当请求资源或页面无法找到时会显示出来。这可能发生在用户输入了一个不存在URL时。

49031

React路由 及 React 路由中核心组件

大家好,又见面了,是你们朋友全栈君。...优点: 有更好用户体验(减少请求和渲染和页面跳转产生等待与空白),页面切换快 重前端,数据和页面内容由异步请求(AJAX)+ DOM 操作来完成,前端处理更多业务逻辑....SPA 页面切换机制: ​ 虽然 SPA 内容都是在一个页面通过 JavaScript 动态处理,但是还是需要根据需求在不同情况下分内容展示,如果仅仅只是依靠 JavaScript 内部机制去判断...react-router-dom 核心组件 Router组件 如果我们希望页面中某个部分内容需要根据 URL 来动态显示,需要用到 Router 组件 ,该组件是一个容器组件,只需要用它包裹 URL...包在 Switch 组件中 Route 会一项一项匹配, 匹配成功一项之后,就不会再继续匹配其它内容了.

1.4K20

离开页面前,如何防止表单数据丢失?

向用户添加一个确认对话框,询问他们在具有未保存表单更改情况下是否确认重定向是一种良好用户体验实践。通过显示此提示,用户将意识到他们有未保存更改,并允许在继续重定向之前保存或丢弃它们工作。...应用程序最终版本可以在 CodeSandbox 上进行测试,代码可在 GitHub 上获得。...使用 beforeunload 事件检测页面离开 我们创建 FormPrompt 组件,在其中添加 beforeunload 事件监听器。此事件将在用户离开页面之前触发。...为了使我们示例更具代表性,我们添加一个名为 Home 新路由,它将重定向到表单之外。 Home 组件很简单,只显示一个主页问候语。...请注意, Stepper 没有单独路径,所有其他路由都是它子路由。它作为布局组件,在每个页面上呈现。每个页面内容显示在特殊 Outlet 组件位置。

5.8K20

使用React-Router实现前端路由鉴权

本文想写一下React-Router使用,但是光介绍API又太平淡了,而且官方文档已经写得很好了,这里就用一个常见开发场景来看看React-Router是怎么用吧。...本文全部代码已经上传GitHub,大家可以拿下来玩玩:github.com/dennis-jian… 应用示例 本文要实现功能是大家经常遇到场景,就是要控制不同用户角色来访问不同页面,这里总共有四个页面...模块划分 虽然我们跳转实现了,但是所有人都可以访问任何页面,我们前面的需求是要根据登录角色限制访问页面的,在写代码前,我们先来思考下应该怎么做这个。...,如果有就直接渲染Route组件,如果没有就返回某个页面,可以是登录页或者后台首页,具体根据自己项目需求来。...本文内容偏简单,作为熟悉React-Router用法还不错,但是我们不能只会用,还要知道他原理。

2.3K41

react项目实战教程(react项目实战)

大家好,又见面了,是你们朋友全栈君。...文章目录 项目实战前准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App... ) } } 后续发现了问题 /admin/article显示Article中内容 但是/admin.../article/edit/2时候不显示ArticleEdit中内容 解决方法,直接在routes/index.js里面添加一个标志exact然后遍历路由时候判断是否要添加exact属性...react-loadable 通过yarn add react-loadable安装 在npm官网中搜索查阅使用方法 并新建src/component/loading/index.js文件,当懒加载未完成时,会显示页面内容

2.5K50

无废话快速上手React路由

/two' function Home () { return ( 是Home页面 <Link to="/home...要点总结: 将多个Route组件同时放在一个Switch组件中,即可避免多次无意义<em>的</em>路由匹配,以此提升性能 重定向 当<em>页面</em>跳转时,若跳转链接<em>没有</em>匹配上<em>任何</em>一个 Route 组件,那么就会<em>显示</em> 404 <em>页面</em>...最后通过浏览器<em>的</em>回退按钮返回到了 / <em>页面</em>,说明中间<em>的</em> /home <em>没有</em>被存在浏览器<em>的</em>记录里 goForward 调用 goForward 方法,就相当于点击了浏览器<em>的</em>返回下一个<em>页面</em>按钮,如下图所示:...,组件<em>的</em> props 属性中是否有下图所示<em>的</em><em>内容</em>:(前者有,后者无) ?...尝试打印普通组件App<em>的</em>props,发现此时props中已有<em>内容</em>了,即普通组件也能拥有跟路由组件一样类似的功能 return ( <

1.7K20

react壁纸网站项目开发中一些思路总结

需求 在壁纸详细页面的右上方显示是该图片发布者基本信息(头像, 昵称, 个人简介), 需要实现需求是点击用户头像, 跳转到他个人中心页面....分析 点击头像之后,调用react-router-dom 提供useNavigate钩子 进行路由跳转到个人中心页面, 跳转时候我们需要将该用户(也就是该作品发布者id)带过去,那我们就可以在个人中心页面拿到这个...我们这里需要动态路由, 因为不用 用户中心基本都是一个样子, 我们可以使用一个页面, 而页面内容展示取决于用户id, 因为里面的内容都是通过用户id 进行后端接口调用, 返回用户信息....如果当前中心页面正好是当前用户中心页面, 那么就需要在中心页面显示编辑个人信息按钮 而其他用户中心页面显示....以及使用条件判断&&通过条件渲染来实现仅在当前用户中心页面显示编辑按钮功能.

7310

win10 uwp 简单MasterDetail UWP 导航List点击后退按钮页面更改大小修改显示修改代码源码左右列表和内容相互操作

开始窗口是很大,可以两栏,其中左边显示列表,右边因为开始没有点击列表就显示图片,点击列表显示内容,就是下面的图。 ? ?...如果屏幕小,那么只有一栏显示列表或内容 当然可以看下垃圾wr,他画图可以看出来,专业 ? 然后发下图,可以看到我最垃圾 ? ?...,可以去下源代码https://github.com/lindexi/UWP 然后在按后退按钮,就把我们hasFrame=false; 大概我们就把一个页面做好,Detail就显示我们点击传str...那么我们在界面变化是否,是否知道我们显示内容还是显示列表,这时就是我们得HasFrame,依靠这个选择ZIndex 修改代码 现在需要说下,如何修改代码,作为你需要。...) 如果我们按返回,但是我们撸了一半,假如我们是页面跳转,不使用源码,那么加上 NavigationCacheMode ,保存页面,这样不会让页面现在选择重新 左右列表和内容相互操作 如果需要使用左右两边相互操作

1.9K00

React Router 路由跳转最佳实践秘密

Suspense 可以一定程度上拦截可能会发生报错行为,并且我们有机会在加载页面时,显示一个 Loading 过程。 }> } /> 加了这个之后,我们来看一下页面切换演示效果 注意看,组件首次加载时,会显示我们在 Suspense...4、进一步结合 useTransition 使用 但是这里我们注意到,每个页面的整体体积是非常小。有的甚至只有不到 200B,打包之后还会变得更小,因此新页面组件模块加载非常快。...大多数情况下,增加一个 Loading 表示加载过程其实是没有必要。因此,我们这里可以进一步结合 useTransition 来让 Suspense Loading 不显示。...在上面的演示图中我们可以看到,由于新页面模块请求非常快,因此切换过程也非常丝滑,基本上看不出来有任何卡顿。 5、总结 在以前开发中,大家对于 React 并发模式,更多停留在有所耳闻阶段。

19310
领券