使用react-router-dom在特定div元素中进行路由
React Router是一个用于构建单页应用的库，它可以帮助我们在React应用中实现路由功能。而react-router-dom是React Router库的DOM绑定版本，它提供了一些特定于浏览器环境的功能。
使用react-router-dom在特定div元素中进行路由，需要进行以下步骤：
- 安装react-router-dom库：
- 安装react-router-dom库：
- 导入所需的组件和函数：
- 导入所需的组件和函数：
- 创建路由组件：
- 创建路由组件：
- 在特定的div元素中使用路由：
- 在特定的div元素中使用路由：
在上述代码中，我们首先导入了BrowserRouter、Route和Switch等组件。然后，我们创建了三个路由组件：Home、About和Contact。接下来，在特定的div元素中使用了Router组件，并在其中定义了导航链接和路由规则。最后，使用ReactDOM.render将路由组件渲染到指定的div元素中。
这样，当用户点击导航链接时，React Router会根据路由规则渲染相应的组件，并将其显示在特定的div元素中。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版、腾讯云CDN等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
腾讯云官网链接：https://cloud.tencent.com/
相关·内容
我尝试显示特定div中的组件，但它不起作用： Index.tsx： import React from 'react';importGeneralPage" component={General}/> </Router>}
export default Routes; 在应用程序组件中一
浏览 21提问于2020-04-05得票数 0
回答已采纳
我目前正在使用react路由器dom在我的react应用程序中进行路由。我正在尝试使用来自react路由器dom的链接滚动到另一个页面上的特定div。我的代码如下: App.js </Rout
浏览 20提问于2021-02-21得票数 1
回答已采纳
1回答
我有定义标题的功能组件，现在我希望滚动实现时，用户点击标题，用户应该滚动到适当的功能组件在下面的同一个页面 const Page = () => {
<div><div> </div> Contact Us
浏览 11提问于2020-08-09得票数 0
1回答
在将Reactive路由器更新到v6之后，我正在重构我的React应用程序，并且我消除了在我的路由中遇到的错误，除了现在想要的布局被破坏了。function Layout({ children }) { <div className="layout">
浏览 2提问于2021-11-15得票数 4
回答已采纳
我使用了airtable.com示例中的helloword代码，它很好，因为它成功地显示了helloword。它显示Error: Objects are not valid as a React child (found: Error: [object Object]).ui';import { BrowserRouter, Route, Switch, NavLink} from 'react-rou
浏览 2提问于2020-06-02得票数 0
回答已采纳
我已经与此斗争了一段时间，我有一个包含一些链接的Nav页面和一个应根据url更改页面内容的反应性路由器交换机。问题是，当我单击链接时，地址栏中的URL将更改为正确的URL，但内容不会更改。RecoilRoot} from 'recoil';import { BrowserRouter } from 'react-router-dom/atoms';
import {Link
浏览 3提问于2021-08-19得票数 0
回答已采纳
4回答
我试图设置路由，但由于某种原因，它返回一个空白页，而不呈现任何内容。我使用的是路由器版本6.3.0import ReactDOM from 'react-dom';import '.:3000/landing时，不会呈现任何内容，当我尝试
浏览 13提问于2022-04-02得票数 0
回答已采纳
3回答
这是App.js中的my ()函数，它们是:"Sidebar、Feed和Widget“在route ="/"和="/login"中不断呈现，此外，"Login”comp甚至没有在路由="/login"中呈现<Router> <Switch>
<Route path
浏览 6提问于2022-01-12得票数 2
回答已采纳
4回答
我安装了npm，安装了react路由器-dom@6，并设置了路由路径。from "react";import { BrowserRouter, Switch, Route } from "react-router-dom/components/SignUp/SignUp";
return (
<div&
浏览 17提问于2022-03-01得票数 1
回答已采纳
/App.css';import Home from './Pages/SignUpPage';
return ( <BrowserRouter><Route path='/signup
浏览 2提问于2022-06-29得票数 2
1回答
我的应用程序有一些场景，我们需要通过几条路径“通过”组件才能呈现细节，不仅是这样，而且还需要为“父”路由显示一些东西，然后为子程序拆分.必须注意的是，我们没有一个“路由配置”文件，相反，我们的路由是我们需要它们的地方。function AuthenticatedUser= () => { return ( );
浏览 1提问于2022-09-21得票数 1
回答已采纳
5回答
我在学习反应，被困在反应路线上import React from "react"; return ( <div>
<Switch>" exact component={
浏览 0提问于2018-12-29得票数 3
回答已采纳
我第一次尝试使用路由，并遵循来自的确切指示import { Route } from "react-router-dom"; return ( <Route path = "/welcome<Route path = &q
浏览 4提问于2021-11-03得票数 98
当用户进入我的域www.example.com时，他们会看到我使用React创建的网页。当他们转到www.example.com/anotherpage时，我想用React向他们展示一个不同的网页。
浏览 9提问于2021-06-16得票数 0
回答已采纳
16回答
我试图在一个示例应用程序中设置react路由器，并得到以下错误：我的应用程序设置如下：const router= ( <Router histpry={browserHistory}>
<Route path="/" componentIndexRoute&
浏览 1提问于2018-02-06得票数 117
回答已采纳
那是我的Home.js <div> <nav className</li> <li>Create Recipe</li> <
浏览 2提问于2022-07-13得票数 1
回答已采纳
安装最新版本的v6获得此错误后：import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom&
浏览 0提问于2021-11-12得票数 2
我有一个全局的导航条，可以在所有页面中使用。Route path="/about" element={<About />} /> </BrowserRouter>
它不是呈现Home组件，而是在我访问
浏览 6提问于2021-12-08得票数 1
我试图添加一个嵌套路由，它将与它的父路由一起呈现到我的应用程序中，但是当我添加嵌套路由时，整个文档就消失了。为什么会发生这种情况？我的代码看起来有点像这样：import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom当我删除行<Route path='/' element={<Child />
浏览 7提问于2022-11-13得票数 1
回答已采纳
2回答
我有一个数据列表，我正在使用地图显示在屏幕的左侧，点击后，一个新的组件应该呈现在同一屏幕的右侧，网址也必须改变在浏览器中，考虑使用onClick而不是链接到，但如果使用则无法指定网址的变化。const Home = (props) => {<div className="main-wrapper">
<div className="service-wrapper"><Service/
浏览 13提问于2019-03-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
