我正在使用来自的示例,但是我将它创建为一个单独的组件。我有Home和Errorpage组件。当我单击Foo、Bar或Baz时,它一直路由到错误页面,并且无法获得要显示的路由param值。我错过了什么吗?非常感谢,提前感谢。这就是它的样子;
//App.js
import React from 'react'
import style from './App.module.css';
import {Switch, Route, NavLink } from 'react-router-dom'
import Home from './c
我正在学习如何从useMatch()中使用"react-router-dom",我得到了下面的错误,我的网页是空的:
Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at matchPath (index.tsx:1148)
at index.tsx:481
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js
我正在使用react-router-dom版本6.4.0启动react项目,但无法为所有路由创建通用的标头。
App.js --这是我要添加RouterProvider的文件
import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";
function App() {
r
我有一个主页,这是第一次呈现,主页有一个链接到邮编页。我的目标是从主页路由到邮政编码页面。由于某种原因,当我单击链接时,邮政编码页面中的代码不会呈现,但是url将更改为/Postcode。我在下面的代码上使用了嵌套的路由技术,但是当我没有将邮政编码路由作为第一条路由的子路由时,它就能正常工作。那么,当第二条路由是第一条路由的嵌套路由时,为什么它不起作用呢?
App.js代码:
import logo from './logo.svg';
import './App.css';
import { Mainpage } from './component
我和react-router v6一起工作。我想要创建一个基于id的新路径。在我的主页"example.com"上,我有一些文章。我想为每一篇文章"example.com/{id}"创建一个详细的视图。我的方法是这样的:
App.tsx
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import ProjectWrapper from "./components/ProjectWrapper";
import Home from
我花了一整晚的时间复习了所有其他有同样问题的StackOverflow问题。我在每个我可能使用它的地方都使用过。只有当我将导航栏放在switch语句的正上方时,我才能使路由正常工作。然而,这对我的应用程序并不好,因为我正在使用侧边抽屉来放置我的导航链接。我的URL正在改变,但是,什么都没有呈现。我使用的是React路由器4.3.1。这是我整个网站的一个问题,如果我真的点击了enter或重新加载,路由就会起作用。这是我的设置。 Index.js import React from 'react';
import ReactDOM from 'react-dom'
我使用react-router-dom进行路由,而且由于我也使用GitHub页面,所以我需要在Router.jsx中使用HashRouter,如下所示
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Customer from './Customer';
const MyRouter = () => (
我试图添加一个嵌套路由,它将与它的父路由一起呈现到我的应用程序中,但是当我添加嵌套路由时,整个文档就消失了。为什么会发生这种情况?我的代码看起来有点像这样:
import React from "react"
import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom"
function Foo(){
return(
<div>
<h1>This is the parent</h1>
<Outlet /&g
我试图在我的reactjs应用程序中使用react路由器。我遇到了这个问题:
这就是我想做的:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/T
我正在做一个实践练习,我正在使用router v6创建子路由,问题是配置文件路由有一个身份验证,如果它是认证的--它向我显示配置文件组件,否则它会把我送回家。现在,对于这个/profile路由,我创建了一个/exerciselist子路由,但是当我想访问/配置文件/锻炼者时,组件不加载我,它直接把我发送到/profile路由,我如何使它加载配置文件/练习路径?
import React from 'react'
import { BrowserRouter, Route, Routes, Navigate} from "react-router-dom"
im
我希望能够导航到< Router >中定义的"subpage“之外的主页。这是我的组件。
import * as React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Search } from './page/Search';
import { Quote } from './page/Quote';
export class MainContent ext
我有以下两个文件
AppRoutes.tsx
import { Route, Routes } from "react-router-dom";
import NotFound from "../pages/NotFound";
import MessageRoutes from "../features/messages/routes/MessageRoutes";
import Home from "../pages/Home";
export default function AppRoutes() {
return
我的版本是"react-router-dom":"^5.0.1",我的应用程序没有像我在教程中看到的那样加载。
我试着更改我的代码,因为这个人使用的是较旧的版本。
import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import about from './components/about';
import work from
我已经实现了一个嵌套的反应路由器应用程序。在下面的路由结构大纲中,用(1)路由1,2,3很好。另外,当我登陆3时,它正确地显示了sidebar和组件(1)。当我单击组件(1)中的Link链接到(2)时,它无法工作。我在寻找类似的问题,但没有找到答案。你能告诉我我错过了什么吗?
// Outline for routing structure
App.js
L 1
L 2
L 3
L sidebar // link to (1), (2). This should be docked when rendering (1), (2)
L (1) // path:'/dashboar