react-router 相关问题

从“react”导入React 从“./img/logo1.png”导入徽标从“react-router-dom”导入{链接} 导出默认函数 Navbar() { 返回（ {/* 主题切换... import React from 'react' import logo from './img/logo1.png' import { Link } from 'react-router-dom' export default function Navbar() { return ( <div> {/* theme switch and login signup */} <div className="border-2 border-blue-600 h-full"> <Link to="/">Home</Link> </div> </div> ) } 我一开始尝试环绕一个普通的 div 或一个部分，但没有得到输出。这是一个完全空白的白屏。我以前做过 Link 项目，但这是我第一次遇到这个问题。我也禁用了反应安全模式。我到底应该做什么？ import React from 'react'; import logo from './img/logo1.png'; import { Link, BrowserRouter as Router } from 'react-router-dom'; // Import BrowserRouter export default function Navbar() { return ( <Router> {/* Wrap your Link components inside Router */} <div> {/* theme switch and login signup */} <div className="border-2 border-blue-600 h-full"> <Link to="/">Home</Link> </div> </div> </Router> {/* Close Router */} ); }

reactjs react-router tailwind-css react-router-dom

回答 1 投票 0

使用react-router时有没有办法将参数限制为某些值？

我正在使用react和react-router构建一个站点，我有两种不同类型的路由，如下例所示： <

javascript reactjs react-router

回答 2 投票 0

如何在 React + Material UI 中使用 Link 进行导航

常量页面 = ['主页', '菜单', '预订']; {pages.map((页面) => ( const pages = ['home', 'menu', 'reservation']; <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}> {pages.map((page) => ( <Link component={Link} to='/'>Home</Link> ))} </Box> 我尝试观看一两个有关如何在 MUI 中使用路由的视频，但我无法找到解决方案。尝试实现 MUI 路由库中的示例，但我无法获取它。有没有更简单的方法来完成它？我已经在 App.tsx 中更新了我的路线和路线。你可以使用react router dom包6.. 这是一个例子： [Github 示例][1] 它有很多导航方法，例如“链接到”和 useNavigate import { Routes, Route, Outlet, Link } from "react-router-dom"; function Layout() { return ( <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/dashboard">Dashboard</Link> </li> <li> <Link to="/nothing-here">Nothing Here</Link> </li> </ul> </nav> <hr /> <Outlet /> </div> ); }

reactjs material-ui react-router

回答 1 投票 0

如何在索引文件级别使用 const createBrowserRouter：ReactJS

我的代码结构如下，当我尝试加载useBlocker时，它会抛出以下错误错误：useBlocker必须在数据路由器内使用。所以为了解决这个问题，我们...

javascript reactjs react-hooks react-router

回答 1 投票 0

未重定向至所需链接

问题是，每当我尝试结账时，如果我没有登录，它会转到链接“http://localhost:3000/login?redirect=shipping”登录，然后转到运输站点什...

javascript reactjs react-hooks react-router react-router-dom

回答 1 投票 0

如何确保在 @tanstack/react-router 中应用具有身份验证重定向的管理布局

我正在开发一个使用 @tanstack/react-router 的项目，我需要保护我的管理页面。我决定使用布局将身份验证限制应用于管理文件夹的所有子文件夹。 ...