它如何在react routes属性中工作
在React中，路由（Routes）属性用于定义应用程序的导航逻辑和页面结构。它是React Router库的一部分，用于实现单页面应用（SPA）的路由功能。
React Routes属性工作的方式如下：
- 路由定义：通过定义路由，可以将不同的URL路径映射到不同的组件，以便在用户导航时显示正确的内容。可以使用
<Route>组件来定义路由。每个<Route>组件都有两个必需的属性：path和component，其中path指定URL路径，component指定该路径对应的组件。 - 嵌套路由：React Router还支持嵌套路由，这意味着可以在组件中嵌套其他路由。通过嵌套路由，可以构建更复杂的应用程序结构。可以使用
<Switch>和<Route>组件来实现嵌套路由。<Switch>组件用于包装多个<Route>组件，并只渲染匹配的第一个子路由。 - 路由参数：在实际开发中，很多时候需要从URL中获取参数，并在组件中使用这些参数。React Router提供了两种获取URL参数的方式：动态路由和查询参数。动态路由使用冒号（:）来定义参数，例如
<Route path="/users/:id" component={User} />，在User组件中可以通过props.match.params.id来访问参数值。查询参数是URL中以?开头的键值对，可以通过props.location.search来获取，并使用URLSearchParams API进行解析。 - 跳转和导航：React Router提供了
<Link>组件用于创建导航链接，点击链接时可以在不刷新页面的情况下导航到其他页面。<Link>组件可以指定to属性来指定要导航的URL路径。 - 路由守卫：有时需要对某些路由进行权限验证或其他条件验证。React Router提供了
<Route>组件的render属性，可以用于自定义渲染组件的逻辑。通过在render函数中进行条件判断，可以实现路由守卫的功能。
React Router是React生态系统中最常用的路由库之一，它提供了丰富的功能和灵活的配置选项，适用于各种规模和类型的应用程序。对于使用腾讯云的用户，腾讯云提供了云托管（CloudBase）产品，可用于托管React应用程序。详情请参考腾讯云云托管。
相关·内容
1回答
如何在React上创建多个页面
、、、、
因此，我已经检查了多个帖子和网站，但我无法让它工作。它只是用肚脐条呈现一个白色屏幕。这是代码：
App.js：
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
function App() {
return (
<Router>
<Nav/>
<Routes>
<Route path='/about' element={About}/>
</Routes>
浏览 2提问于2022-04-25得票数 0
1回答
我正在做一个像现在这样的网站
我想添加阴影到肚脐底部，并使它粘稠。然而，对于一些人来说，即使在使用z索引之后，主内容部分(其中包含单词“主页”)也会出现在导航栏的顶部，直到前面的阴影。
这是我的密码。
NavBar组件
import React from "react";
import { Bars, Nav, NavLink, NavMenu } from "./NavbarElements.js";
const Navbar = () => {
return (
<Nav>
<NavLink to=&
浏览 4提问于2022-07-30得票数 0
回答已采纳
我想在react应用程序中使用rtl布局。我已经使用material-ui下一个版本来集成这个应用程序。我已经使用了下面的代码来制作应用程序布局rtl。有些组件在rtl布局中工作正常，但有些组件不受影响。
/**
* App.js Layout Start Here
*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { MuiThemePr
浏览 1提问于2018-04-19得票数 4
1回答
我正在尝试使用React来制作一个简单的导航栏，它将在页面中导航。
我使用的是路由器，您可以看到链接改变了页面，但没有呈现组件。我用这个进口：
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
将我的导航包装在标签中，包括到路由的链接，然后使用标记包装所有路由。
<Routes>
<Route path="/" element={<Home />} />
<Route p
浏览 2提问于2022-05-25得票数 0
回答已采纳
我打算将我在6之前的版本中找到的代码传输给下面公开的6.3.0版本的另一个版本，它返回以下错误：
!！位于"/admin“位置的匹配叶路径没有元素。这意味着它将在默认情况下呈现一个空值，从而生成一个“空”页。
我无法渲染组件，非常感谢您的帮助，非常感谢
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
const routes = [
{
path: "/admin",
element: <LayoutAdmin/>,
浏览 12提问于2022-04-24得票数 0
我似乎不能用Jest测试我的底端导航器。
这是我的领航员：
import * as React from 'react';
import 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import IonIcon from 'react-native-vector-icons/Octicons';
import {NavigationContainer} from '@react-navig
浏览 3提问于2021-04-27得票数 0
回答已采纳
下面的React路由代码可能在React路由器v5中工作，但给出了React路由器v6中的以下错误
错误: Player不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
是否有可能更新路由/路由代码以使其在React路由器v6中工作？
function App() {
// Some stuff here...
const { players, offlinePlayers } = usePlayers();
return (
<ThemeProvid
浏览 8提问于2022-03-03得票数 3
回答已采纳
我正在使用来自React Router v4的路由组件的render props使用Typescript和React实现经过身份验证的路由。 路由： import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { ROUTES } from 'utils/constants';
import HomePage from 'components/pages/Home';
import GuestLogin from '
浏览 17提问于2020-08-18得票数 3
回答已采纳
1回答
我是我的react应用程序，我想要管理我的路由。我想要正确处理公共和私有路由。我做了一点调查，但现在我很困惑。有很多方法，但我想知道如何正确地处理它。
我发现这个组件用来处理私有路由。
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, user, ...rest }: any) => (
<Route
{...rest}
rende
浏览 5提问于2020-02-21得票数 1
回答已采纳
1回答
我在iis上添加了一个站点，指向react应用程序的build文件夹。
当我像localhost:5000/一样使用它时，它工作得很好，但是如果我尝试到localhost:5000/Group (导航路径)，它就不起作用了，它给了我一个404错误
HTTP错误404.0 -未找到
您要查找的资源已被移除、给定不同的名称或暂时不可用。
..。
app.js：
import React from 'react';
import './App.css';
import Routes from './routes';
import NavBar
浏览 0提问于2019-12-16得票数 0
2回答
位置"/“处匹配的叶路由不包含元素。这意味着在默认情况下，它将使用空值呈现一个，从而产生一个“空”页面 //App.js File
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";
const App = () => {
return (
<Router >
浏览 197提问于2021-11-05得票数 69
我需要它重定向到我的主页，如果url是错误的，问题必须在这个部分，因为在我使用重定向之前，但是在新版本的React中，它是导航的，我不知道输入的方式是否改变了
import React from 'react';
import {Routes, Route, Navigate} from 'react-router-dom';
import {authRoutes, publicRoutes} from '../routes';
import { SHOP_ROUTE } from '../utils/consts';
cons
浏览 1提问于2022-03-13得票数 0
回答已采纳
我是react.js的新手。我是网络风暴的研发人员。
我有这个错误，我没有成功地解决它，它看起来反应是不认识的，但我试着安装任何npm反应包，仍然没有工作。
SyntaxError:意外令牌<
这是我的密码：
index.jsx：
/** @jsx React.DOM */
var React = require('react');
var ReactDOMServer = require('react-dom');
var DefaultLayout = require('./layout/Master');
//va
浏览 1提问于2016-05-11得票数 4
回答已采纳
1回答
我正在构建一个带有React的通用JS应用程序，我使用webpack 2来捆绑我的服务器端代码。
在构建服务器端代码时，webpack似乎没有转移JSX，因为我得到了以下错误：
。克隆它，点击npm安装，然后npm运行构建:终端上的后端
ERROR in ./server/router.js
Module parse failed: webpack-target-node\server\router.js Unexpected token (8:31)
You may need an appropriate loader to handle this file type.
| export d
浏览 4提问于2016-08-26得票数 3
回答已采纳
我和ReactRouter有点问题。
下面是我如何初始化和运行路由器：
var routes = (
<Route handler={App}>
<DefaultRoute handler={Domains}/>
<Route path="login" name="login" handler={Login}/>
<Route path="signup" name="signup" handler={SignUp}/>
</Route>);
浏览 0提问于2015-08-20得票数 2
我正在跟踪，但我甚至没有做一个最简单的例子来工作。上面写着Uncaught ReferenceError: Route is not defined。
我通过JavaScript和我自己的脚本包括了这3个cdnjs文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransform
浏览 3提问于2015-01-19得票数 1
回答已采纳
我正在一个Meteor + React项目中工作，该项目需要使用react-router进行服务器端呈现。当前的react-router版本是v3，我学习了一个关于SSR 的教程。总结的步骤如下：
创建一个公共路由文件
将路由文件包括在客户端路由器中。
// index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
// import ro
浏览 0提问于2017-04-18得票数 2
请帮帮我
当路由不在<Routes>中时，它会给出一个错误: error: A永远只用作元素的子元素，从不直接呈现。请把你的包在一个
当它在<Routes>中时，它会给出一个错误: Error: Abc is not a <Route> component。的所有组件子项必须为<Route>或<React.Fragment>
请帮我解决这个问题？或者任何建议。
在两种情况下都尝试过此操作，但出现了上述错误之一。
由于这不会生成错误，但是我的私有路由的子组件不会呈现。
import React from 'react'
浏览 0提问于2021-12-01得票数 1
我想隐藏一个组件，根据路由的反应-路由器-多姆v6。我可以用精确的路径来实现它，但我也想将它隐藏在嵌套的路径中。我试过这样做：
{location !== "/dashboard/*" && <Header />}
但是它只在页面http://localhost:3000/dashboard/*上工作，这不是我想要的。我怎么才能解决这个问题？
这是完整的代码：
const location = useLocation().pathname
const conditionLocation = location === "/dashboard&#
浏览 3提问于2022-01-09得票数 -1
回答已采纳
我目前使用的是React-Native-Paper bottomNavigation。它工作得很好。然而，下一个要求是将Stack Navigator添加到各个屏幕。我让它在常规的底部栏导航上工作，但无法让它与React-Native-Paper库一起工作。 const SubjectNavigator = createStackNavigator({
Subjects: SubjectScreen,
Topics: TopicListScreen
}, {
navigationOptions: {}
});
const NavigationController = ()
浏览 15提问于2020-10-05得票数 2
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</Re
浏览 13提问于2022-02-25得票数 2
回答已采纳
8回答
我正试图向vercel发布一个无服务器的网页。我想使用的反应路由器，这在我的电脑上工作很好，但当我部署它不工作，有人能帮助我吗？
(我想在没有服务器的情况下完成这项工作)
// My main code
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Main from './routes/Main'
import Tos from './routes/Tos'
import Priv
浏览 3提问于2020-11-13得票数 13
回答已采纳
我有包含单个和多个组件的路由，我使用authguard来限制对某些routes.How的访问，我可以在具有多个组件的路由上应用authguard吗？
routes.js
import { BrowserRouter as Router,Route} from 'react-router-dom';
import React from 'react';
import { FirstConnectedComponent,SecondConnectedComponent } from './App.js';
import Header from &#
浏览 1提问于2018-03-29得票数 1
回答已采纳
1回答
我正在尝试将我的web应用程序实现从ReactiveRout0.13.x更新到1.0.0，这是在后端使用和服务器端呈现。
我没有找到任何好的迁移指南来转换这段代码：
something.serve(function (req, res) {
Router.run(routes, req.path, function (Root, state) {
fetchData(state.routes).then(function (data) {
var flux = new Flux(null, user, data, state.params, c
浏览 2提问于2015-11-04得票数 0
回答已采纳
1回答
我有一个反应路由器3的设置，很好地工作在嵌套组件。现在，当我试图在react路由器V4中做同样的事情时，我似乎无法让它工作。我读过几篇文章，包括一些文档，但仍然无法让它起作用。我首先在react路由器3中发布我的设置，然后我尝试了什么-路由器4。
React路由器3安装App.js
import { Router, browserHistory } from 'react-router';
import Store from './store';
import routes from './routes';
ReactDOM.render(
浏览 3提问于2017-06-26得票数 1
回答已采纳
我是新来的反应，我不能让我的路线工作。我正在学习文档中的教程，但不知怎么的，它不起作用。assume中的内容没有显示出来，所以我假设BrowserRouter、路由或嵌套存在某种问题，但我真的不知道发生了什么。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App&
浏览 3提问于2022-08-29得票数 2
1回答
我想构建一个单页面登录系统，它根据我在React-Redux存储中设置的状态呈现不同的页面。当存储的状态更新时，render() {}函数不会更新。 App.js import React from 'react'
import store from './redux/store'
import { Provider } from 'react-redux'
// Route to Renderer.js below
import Renderer from './Renderer'
class App extends R
浏览 24提问于2020-04-29得票数 1
回答已采纳
9回答
我已经用react-router版本4设置了反应。当我直接在浏览器上输入URL时，路由工作，但是当我点击链接时，浏览器上的URL会发生变化(例如，)，但是内容不会被更新(但是如果我刷新，它就会被更新)。
下面是我的设置：
Routes.js设置如下：
import { Switch, Route } from 'react-router-dom';
import React from 'react';
// Components
import Categories from './containers/videos/Categories';
i
浏览 8提问于2017-06-04得票数 40
回答已采纳
1回答
类对象可以从调用吗？
、、、
我在研究ReactNative.Navigator.renderScene道具。
'use strict';
import React,{Component} from 'react';
import ReactNative from 'react-native';
const {
TouchableHighlight,
Navigator,
AppRegistry,
Text,
View,
} = ReactNative;
class TestClass extends Component{
render(){
浏览 2提问于2017-04-22得票数 4
回答已采纳
大家晚上好，
我一直在尝试将withRouter添加到我的react应用程序中，这样它就不会因为connect功能而中断(参见下面的代码)。
我的代码正在工作，但是当我将withRouter添加到下面一行时，它会用以下消息破坏我的应用程序：
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
错误:不变失败:不应在Router>之外使用<withRouter(连接(应用程序))
我找到了这个主题：，但是当我尝试用一个路由器替换它时，它对我的问题没有帮助
请在下面找到所使用的全部代
浏览 4提问于2020-10-21得票数 0
回答已采纳
所以我制作了一个超级简单的react应用程序，我试着使用路由，但是这个：
const routing = (
<Router>
<React.StrictMode>
<Routes>
<Route exact path="/" component={App} />
<Route exact path="/404" component={<NotFound />} />
</Routes>
</React
浏览 14提问于2022-08-28得票数 1
我使用templete，它使用的是旧版本的react &路由，如果不是，我想重定向用户登录，但是这个模板在app.js中有不同的路由方法
"react-router-dom"："^4.3.1"，
"react"："^16.6.3"，
“react dom”："^16.6.3"，
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import
浏览 3提问于2022-03-22得票数 1
回答已采纳
我希望将我的路由文件分解成组件，所以
<BrowserRouter basename="/recruiter" >
<div>
<Nav />
<Switch>
/* HOMEPAGE ROUTES */
<Route exact path="/" component={Home} />
<Route exact path="/how-and-why" c
浏览 0提问于2018-08-27得票数 1
当我去任何路线的时候。
关于这个，我应该将BrowserRouter改为HashRouter。但是如果我这样做，我的本地主机路线就完全停止工作了。有什么建议可以做到这两点吗？或者只是在开发结束时部署它？还是我漏掉了什么？
App.tsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './styles/main.scss';
import { Footer } from './components/Footer'
浏览 5提问于2022-12-03得票数 0
1回答
有了新的React路由器V6，路由的处理方式发生了很大变化。我目前正在努力构建以下结构 <BrowserRouter>
<Routes>
<Route path=":locale" element={<OtherRoutes/>} />
<Route path="*" element={<p>404</p>} />
</Routes>
</BrowserRouter> OtherRoutes组件应该根据父参
浏览 17提问于2021-11-08得票数 1
我已经写了一个代码，点击链接路由到视图。但这些联系并没有消失。请指导我如何才能让视图显示，而不是链接。我正在分享图片以获得更多的澄清
App.js
import React, {Component} from 'react';
import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';
import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Sel
浏览 2提问于2021-11-07得票数 0
我尝试过其他类似的问题/帖子中提到的解决方案，但似乎仍然找不到解决办法。空白页。控制台警告提到与ReactDOM.render对应的行。我尝试了其中一种路径"/“和索引，但没有起作用。
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './style.css'
import LandingP
浏览 1提问于2022-11-25得票数 1
回答已采纳
3回答
如何在响应后呈现反应路径？
、、、、
当有人到达我的网页时，我首先检查用户是否经过身份验证。在呈现路由之前，我需要等待来自GET /auth/loggedin请求的响应，以便知道是应该重定向到/login还是/。我已经向App.js组件添加了条件呈现，但是它总是将用户重定向到/login，即使用户已经通过身份验证。
App.js：
import { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AuthContext from &#
浏览 6提问于2022-01-04得票数 1
回答已采纳
我在使用application时遇到了一些麻烦，我试图将标题、描述和每日价格传递给我的应用程序主页，但是我得到了错误的，“{}类型”缺少了‘Readonly’类型中的以下属性: imagem、titulo、descricao、diaria和2个其他属性。
我尝试过在界面上使用一些值作为可选的，但是它没有工作，我希望得到一些帮助，下面是正在使用的3个文件。
Casa.ts
export interface Casa {
id?: string;
imagem: string;
titulo: string;
descricao: string;
diaria: number;
浏览 3提问于2021-11-12得票数 1
回答已采纳
在使用history.push加载组件后进行重定向时，会再次呈现我的组件。导致componentDidMount()函数运行两次。
下面是我的一个组件的简化代码片段。我希望componentDidMount()只运行一次--在没有history.push的情况下，它可以正常工作。但是当我添加history.push时，它加载了两次。(如果我在react-router中使用Redirect，也会发生同样的情况)
import * as React from "react";
import { history } from "../../configureServices&
浏览 0提问于2019-01-30得票数 6
1回答
道具不会传递到选项卡
、、、
我有一个react-native应用程序，其中我使用React-Native-Router-Flux作为我的导航库，并且我遇到了传递给子组件的道具问题。在我的login.js文件中，在用户登录后，还会使用新的路由属性(登录的用户名)调用新的路由。这在使用堆栈视图时工作得很好，但不适用于选项卡，而props值从未改变过它的初始值。我在下面列出了我的路由和登录文件：
*未设置的属性名为Auth
登录(为简明起见进行了简化)：
.then( (data) => {
Actions.tabbar({Auth: this.state.username})
})
浏览 1提问于2017-11-09得票数 0
下面是我在routes.php文件中的代码：
Route::auth();
现在，我需要在这条路线上设置一个中间件。就像这样：
Route::auth()->middleware('setLang');
但是在这种情况下，它抛出了这个错误：
FatalErrorException第43行中的routes.php :调用null的成员函数中间件()
我怎么才能修好它？
浏览 4提问于2016-11-01得票数 3
回答已采纳
在react路由器6中，在javascript中，这样做是可行的：
<BrowserRouter>
<Routes>
<Route path="/" element={<AppFrame />}>
<Route path="product" element={<ProductView />} />
</Route>
<Route path="*" element={<div>Nothing here<
浏览 7提问于2021-11-10得票数 0
回答已采纳
我遵循了一个关于路由和它是如何在react中工作的react教程。我不知道为什么这段代码不能正常工作。如果我理解正确，它应该呈现我指定的组件。任何帮助都会很感激ps:这正是我所遵循的教程中使用的代码，并且在此过程中运行良好。
App.js代码
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
Link
} from "react-router-dom";
imp
浏览 2提问于2022-03-13得票数 0
回答已采纳
我正在尝试用一个Router React组件(位于不同的.jsx中)来实现Meteor.startup，但是它似乎不能工作。
如果我将Router React组件放在与Meteor.startup相同的.jsx文件中，那么它工作得很好。
你知道为什么会这样吗？
下面是我的不起作用的代码：
import { Routes } from './routes.jsx';
Meteor.startup( () => {
render(<Routes />, document.body);
});
请注意，routes.jsx包含的路由与下面的代码片段中显示
浏览 2提问于2016-04-11得票数 2
目前我正在使用BrowserRouter，但实际上Git页面不能与BrowserRouter一起工作，所以我们需要使用HashRouter。我很难接受这一转变。
这就是它在本地使用BrowserRouter的工作方式。
import "./App.css";
import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./component
浏览 3提问于2022-08-14得票数 1
背景：
我正试图在我的嵌入式Shopify应用程序中创建一些链接。
我知道我不能使用简单的<a>标记，因为Shopify嵌入式应用程序被呈现为iframes。
我在这个教程上取得了一些进展，但是我被困住了：
我想做的事：
我有3页(index.js、dashboard.js和support.js)。我希望允许用户从一个页面导航到另一个页面(有链接和/或按钮)。
我的代码：
通过遵循上面的教程，我已经做到了以下几点：
// index.js
import { Page, Frame } from "@shopify/polaris";
const Index = (
浏览 3提问于2021-04-08得票数 3
import React from 'react';
import CollectionsOverview from '../../components/collections-overview/collections-overview.component';
import {Routes, Route} from 'react-router-dom';
import CategoryPage from '../category/category.component';
const ShopPage = ({match}
浏览 6提问于2022-02-23得票数 -1
1回答
在尝试将下面的组件放入路由器时，我得到以下错误：
src\App.js第3行中的警告:8：“errorScreen”已定义，但从未使用未使用的-vars。
const errorScreen = () => {
const homeRedirect = () => {
window.location.assign('/')
}
return (
<div className='successMessage'>
<h2> Error! </h
浏览 4提问于2022-06-30得票数 0
回答已采纳
我刚刚迁移到react-router，react-router dom v4.3.1，安装了history v4.9。早些时候，我所有连接到商店的组件都获得了路由器道具。现在，他们说必须有一个历史道具。然而，我在任何地方都得不到它，尤其是在App组件中。 根目录： import React, { Component } from "react";
import { Provider } from "react-redux";
// import { BrowserRouter, Route, browserHistory, Switch } from "
浏览 13提问于2019-05-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
