无法在React Router Navlink之间放置边距
在React Router中，无法直接在NavLink之间放置边距。NavLink是React Router提供的组件，用于在应用程序中创建导航链接。它通常用于创建导航菜单或导航栏。
然而，我们可以通过一些方法来实现在NavLink之间放置边距的效果。以下是一种常见的方法：
- 使用CSS样式：可以通过自定义CSS样式来为NavLink之间添加边距。可以为NavLink添加一个自定义的类名，并在CSS中为该类名设置边距样式。例如：
<NavLink to="/" className="nav-link">Home</NavLink>
<NavLink to="/about" className="nav-link">About</NavLink>然后在CSS中添加样式：
.nav-link + .nav-link {
margin-left: 10px;
}这将在每个NavLink之间添加10像素的左边距。
- 使用空白文本节点：可以在NavLink之间插入一个空白的文本节点来实现边距效果。例如：
<NavLink to="/">Home</NavLink>{' '}
<NavLink to="/about">About</NavLink>在这个例子中，我们在两个NavLink之间插入了一个空格字符，这将在它们之间创建一个边距。
需要注意的是，以上方法只是实现在NavLink之间添加边距的一种常见方式，具体的实现方式可能会根据项目的需求和设计风格而有所不同。
关于React Router和NavLink的更多信息，可以参考腾讯云的相关文档和官方网站：
- React Router文档：https://reactrouter.com/
- NavLink组件文档：https://reactrouter.com/web/api/NavLink
相关·内容
我正在尝试使用React Bootstrap创建一个简单的导航栏： import React from 'react';import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/
浏览 37提问于2021-07-19得票数 0
我正在尝试在导航栏上应用填充/边距，以便链接之间有一些空间。 我试着重命名const，但它本身就有冲突，因为我不能在一个文件中使用两次标识符。分析错误:标识符'Route‘已声明。import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from "react-router-domfrom
浏览 28提问于2019-04-24得票数 0
我试图使用react-router，出于某种原因，我有以下警告：import { BrowserRouter, Routes, Route } from 'react-router-dom'; </div>
</BrowserRou
浏览 4提问于2022-08-05得票数 1
回答已采纳
当我尝试使用页边距时，它不能正常工作。请帮帮我。谢谢。下面是我的代码。App.jsx：import { Route, NavLink, HashRouter } from "react-router-dom";
class App extends React.Compone
浏览 0提问于2018-01-09得票数 2
根据Reactstrap docs:这就是我应该使用active navlink的方式 ...<NavLink href="#" active = true >Link< /NavLink> import { NavLink } from 'react-route
浏览 4提问于2017-02-21得票数 8
回答已采纳
我正在使用react with material-ui创建仪表板类型的应用程序。在仪表板主页中，有三个部分，一个用于项目，一个用于项目摘要部分，另一个用于通知。我试过react-router-dom的Route
以下是我的项目代码 </Paper>
以下是我在</
浏览 1提问于2019-11-08得票数 0
2回答
我想改变我的标题颜色时，在我的联系页面。无法从反应性路由器获得位置。我得到"TypeError:无法读取未定义的属性的‘路径名’“。import './Header.css';
cl
浏览 0提问于2018-11-09得票数 0
回答已采纳
3回答
我开始学习反应，并试图在我的旧项目中实现它。问题如下。有带行的App.js import {BrowserRouter, Route} from 'react-router-dom';
import {NavLink} from 'react-router-dom&#x
浏览 2提问于2020-04-25得票数 1
我是ReactJS世界的新手，我想知道如何将active类名传递给<li>元素而不是<a>(Link)元素。<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li><li&
浏览 1提问于2016-01-28得票数 50
回答已采纳
我让reactJS做了这个渲染 return ( <Router> <ul>
<li><NavLinkclassNam
浏览 0提问于2019-01-03得票数 2
回答已采纳
1回答
我是在index.js或App.js中导入(并使用)App.js，还是在导航栏所在的地方导入(并使用)？
在官方网站上，它显示了在使用<Switch>元素之后，<BrowserRouter>标签中包含了<Link>。我可以从这个结论中得出结论，<Switch>总是在使用<Link&
浏览 5提问于2021-08-04得票数 1
回答已采纳
当我的url在map上时，我无法使用activeStyle正确设置NavLink。 fontWeight: 'bold', }}> </NavLink >
<br &#x
浏览 0提问于2017-09-06得票数 0
我在App类中创建了一个NavBar组件。当我将NavBar组件的内容直接放入应用程序时，一切都按其应有的方式工作(链接调用路由，呈现不同的页面)。直接放置在App.js中的NavBar内容import '., NavLink } from "react-router-dom";
import Nav from '
浏览 1提问于2019-08-09得票数 0
我有一个我不知道如何解决的问题，我在运行npm测试时遇到了这个错误
问题是什么，我如何解决？我运行的测试是react附带的标准app.test.js。
浏览 1提问于2018-05-29得票数 81
回答已采纳
我的React边栏组件中有以下NavLink，它成功地链接到一个添加文件夹的新页面；但是，我无法在这个新页面上呈现AddFolder表单(我已经成功地测试了AddFolder表单在边栏组件中呈现，但这不是我想要的<section className="AddFolder_Section"> className="AddFolder_Button下面是
浏览 47提问于2020-07-18得票数 1
1回答
我正在制作一个React项目组合，其中一个组件将是一个图片库(不用说，我是一个React的新手，我想知道，否则我不会问这个问题)。为此，我将使用一个包(react-image-gallery)，它允许我自定义几个项目。我已经安装了，它工作得很好，但我需要自定义它-隐藏缩略图和“播放”和“全屏”按钮。问题是我没有做到这一点，因为应用程序的导航使用了路由器，尽管我努力了，但我无法使状态传递到放置在router上的组件中。这是不起作用的主组件(相当于App)的代码： impo
浏览 24提问于2020-04-14得票数 0
回答已采纳
我使用的是react dom-路由器5.2.0 import/history';
<React.StrictMode> <App />
浏览 3提问于2020-05-21得票数 0
回答已采纳
2回答
图片更好地理解 <ul> <li><NavLink to="/about" activeClassName=&qu
浏览 5提问于2020-11-24得票数 0
回答已采纳
App.jsimport { BrowserRouter, Switch, Route } from 'react-router-dom} from 'react-router-dom';
return (
<div className="container&q
浏览 2提问于2018-11-26得票数 8
回答已采纳
1回答
在我的React应用程序中有一个Navbar组件，当屏幕很小时，它会显示一个Sidebar组件。我在抽屉里用了资料界面来显示侧边栏。我的问题是，只要点击汉堡图标，抽屉就会打开。但当点击链接时，甚至在边栏之外，它都不会关闭。import React, { useContext, useEffect, useState } from "react";
import ".
浏览 1提问于2022-07-14得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
