如何通过react路由传递数据
通过React路由传递数据可以使用两种方法：URL参数和路由状态。
- URL参数：可以通过在URL中添加参数来传递数据。在React中，可以使用react-router-dom库提供的
<Link>组件将数据作为参数添加到URL中，然后在目标组件中通过props.match.params来获取传递的参数。
例如，假设我们有一个列表页和一个详情页，要在列表页点击某个项目后跳转到详情页并传递数据：
列表页：
import { Link } from 'react-router-dom';
const ListPage = () => {
const data = { id: 1, name: '示例数据' };
return (
<div>
<h1>列表页</h1>
<Link to={`/detail/${data.id}`}>查看详情</Link>
</div>
);
};详情页：
const DetailPage = (props) => {
const { id } = props.match.params;
return (
<div>
<h1>详情页</h1>
<p>ID: {id}</p>
</div>
);
};- 路由状态：可以通过将数据保存在路由状态中进行传递。在React中，可以使用react-router-dom库提供的
<Route>组件的render属性来传递状态。
例如，假设我们有一个登录页和一个首页，要在登录成功后跳转到首页并传递用户信息：
登录页：
import { useHistory } from 'react-router-dom';
const LoginPage = () => {
const history = useHistory();
const handleLogin = () => {
const user = { id: 1, name: '示例用户' };
history.push({
pathname: '/home',
state: { user }
});
};
return (
<div>
<h1>登录页</h1>
<button onClick={handleLogin}>登录</button>
</div>
);
};首页：
const HomePage = (props) => {
const { user } = props.location.state;
return (
<div>
<h1>首页</h1>
<p>用户ID: {user.id}</p>
<p>用户名: {user.name}</p>
</div>
);
};这样就可以通过React路由传递数据了。请注意，以上示例中使用的是React Router v5版本。如果使用其他版本，请查阅对应版本的文档。
（注意：根据要求，不能提及具体的云计算品牌商，因此没有提供腾讯云相关产品和产品介绍链接地址。）
相关·内容
1回答
使用React和Router v6，如何在父Events加载上加载和定义数据，然后将事件数据的子集传递给动态嵌套路由-- campaign。我计划在Events路线内定义和设置竞选状态。
由于我在index.js文件上定义路由，所以我试图了解如何最好地将该数据从父路由传递到嵌套路由，因为数据尚未在index.js视图中定义。
<Route path="events" element={<Events />}>
<Route path=":event" element={<Event campaign={campaign}
浏览 5提问于2022-06-04得票数 0
回答已采纳
因此，目前，我们发送一个API调用来获取用户身份验证数据。用户ID，客户ID等等.
然后，我们通过connect()和mapStateToProps将这些数据传递给redux并将用户数据加载到React路由器中。
然后，每个路由获取这个用户数据并通过道具将其传递给呈现的组件.
然后，在我们的许多组件中，我们使用用户数据进行更多的API调用。
然而，大多数情况下，这些数据显示为空对象{}。
最好是通过React路由器将数据向下传递给组件，还是应该在每个需要用户数据的组件上从redux和mapStateToProps获取数据？
浏览 0提问于2018-03-29得票数 0
回答已采纳
2回答
根据我的问题，我正在尝试重构我们应用程序中的路由，以使其更加嵌套。
麻烦的是，似乎不可能从数据递归地呈现一个路由元素，因为react路由器坚持认为路由直接在路由内部，而不是封装在另一个组件中，而且我无法看到如何递归地呈现(任意深度的)任何其他方式。
复制.
import React from "react";
import { BrowserRouter, Routes, Route} from "react-router-dom";
import "./styles.css";
function GenericPage() {
retu
浏览 8提问于2022-06-08得票数 5
回答已采纳
如何使用一个变量来存储来自mongoDB的数据，在另一个react组件中，我们可以使用从mongoDB获取并存储在该变量中的数据。
获取来自mongoDB的数据并将其存储在名为 data 的变量中的文件代码
import React,{useEffect,useState} from 'react'
import './HeroSection.css'
import axios from 'axios'
import {useHistory} from 'react-router-dom';
function Homefilte
浏览 1提问于2021-12-09得票数 2
回答已采纳
2回答
我目前正在尝试完成从组件到组件的路由，并传递数据，以便新打开的组件可以使用它。经过几个小时的研究，我偶然发现了一些在我的案例中行不通的解决方案。
在我的应用程序中，我有两页:主页和搜索。应用程序由几个不同的组件层组成，例如: App.js -> imports Home.js -> imports Body.js。App.js通过使用React路由器来定义路由。主页的正文包含一个搜索栏。执行搜索时，应用程序将获取数据，并需要将这些数据传递给将显示数据的搜索页。请参阅以下文件：
App.js
import React from "react";
import {
浏览 6提问于2022-05-25得票数 1
回答已采纳
3回答
当从一条反应路由转换到另一条反应路由时，我可以通过URL参数传递字符串
this.props.history.replace({
pathname: `${this.props.match.url}/newRoute`,
search: '?someData=someValue'
})
但是，如果我想传递一些更复杂的东西，例如一个深嵌套的JSON对象，该怎么办？这样的数据是否可以在不使用Redux的情况下从一个路由传递到另一个？
所讨论的项目是使用react 14.4.2和react路由器4.3.1。
浏览 0提问于2018-08-29得票数 2
我使用react-router-dom v4.3.1进行客户端路由。我是个反应新手，不知道如何在不使用url参数的情况下将数据从一个视图传递到另一个视图。在Angular中，Angular路由器具有数据特性，您可以在其中传递与路由关联的数据。下面是一个例子： const appRoutes: Routes = [ { path: 'hero/:id', component: HeroDetailComponent, data: { title: 'Hero Detail' } }, ]; 你能在react-router-dom中
浏览 22提问于2019-03-07得票数 0
回答已采纳
1回答
我有一个反应JS“路由”与静态的json数据。我想知道如何从API.Please动态生成此路由数据检查我的以下路由数据，并建议如何做到这一点。 import React from 'react';
const Dashboard = React.lazy(() => import('./views/Dashboard'));
const Colors = React.lazy(() => import('./views/Theme/Colors'));
const Typography = React.lazy(() =&
浏览 23提问于2020-04-05得票数 2
1回答
要求是将某些数据传递给组件，该组件将在路由更改时呈现(以编程方式)。目前我正在使用来自'react-router-redux‘的推送，没有传递任何数据。
因此，我导航到/Animal，并传递希望URl显示的数据中的特定动物详细信息
我正在使用React路由器4。
import {push} from 'react-router-redux';
export function changeRoute(newRoute, data) {
return (dispatch) => dispatch(push(newroute));
}
如何才能做到这一点？
浏览 1提问于2017-09-29得票数 0
我现在正在学习react。我发现程序员在react中路由时通常使用组件属性。因此，为了路由一个名为Menu组件，他们编写如下代码
<Route exact path='/menu' component={ Menu } />
而不是
<Route exact path='/menu'> <Menu /> </Route>
我认为第二种方式在给Menu组件提供props时要方便得多。所以我的问题是，写代码作为第一种方式的好处是什么？
谢谢。
浏览 0提问于2020-08-11得票数 2
1回答
下面的代码生成：
第一个JS文件artists.js I通过useState()钩子中的对象数组映射()，该数组生成艺术家列表，但现在我如何创建一个只显示选定艺术家详细信息的onClick？当我执行console.log()时，我得到了我单击的艺术家的数据，但更多的是，我似乎无法在链接到的details.js页面上显示该数据。有人能帮忙吗。
(artists.js)
import React, { useContext } from "react";
import { Link } from "../components/Router";
import { Ar
浏览 5提问于2020-03-12得票数 0
1回答
我在新的react路由器中使用react路由器和ES6向组件传递一个值？我曾经使用<Handler name = {this.state.name} />，现在使用{this.props.children}。如何将数据从组件中的应用程序传输到它？
如何转移this.state以响应-路线：
export default class App extends React.Component{
constructor () {
this.state = { name: 'Username' };
}
render () {
return (
浏览 4提问于2015-07-26得票数 1
1回答
我已经使用passport.js在我的React中构建了授权，我想在我的App.js文件中获取我的授权路径，以查看用户是否登录到应用程序中，或者是否没有人登录。
为了帮助解决这个问题，我共享了React的App.js文件和Index.js文件的精简版本。
// App.js File
// Import React Libraries, Routes, Container Pages
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
浏览 1提问于2019-04-01得票数 0
1回答
我使用react和上下文API在多个组件之间共享数据，并使用reach路由器进行路由。我的代码如下所示：
function App() {
return (
<div className="App">
<ContextProvider>
<Router>
<Comp1 path='/comp1' >
<Comp2 path="/"/>
</Comp1>
<Comp3 path="/comp3
浏览 0提问于2019-07-29得票数 0
我已经使用npx create-react-app创建了一个react应用程序。我正在使用React路由器来控制路由。我需要能够从我的props.location.search组件中访问Navbar。但是，由于Navbar不是Route的后代，所以location属性不会自动传递给Navbar。如何获得该属性并将其传递给Navbar中的App.js
// App.js
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Cont
浏览 3提问于2020-09-07得票数 1
回答已采纳
我想在React Project中编写一个路由器。但是路由孩子和cloneElement在版本4中不再工作。我还没有找到演示或导师来教如何在路由器版本4中传递路由器中的值。
有没有人有办法解决这个问题？
我在Github的项目：
非常感谢。
import React, {Component} from 'react';
import Header from './commen/header.js';
import Player from './page/player.js';
import {MUSIC_LIST} from '../co
浏览 0提问于2017-09-16得票数 1
1回答
这是我的层次结构 - AddEmployee component
- UpdateComponent
- Home
* EmployeeItem component the employee item component is just a line in a list包含许多保存员工数据的列，在这些列中我有一个更新列，这是一个重定向到更新组件的图标，我如何才能将员工的数据传递到UpdateEmployee component以便显示它们并允许修改它们，我不能使用react路由器历史对象，因为它在EmployeeItem组件中是未定义的，因为它不是一个路由并且rea
浏览 11提问于2020-11-01得票数 0
问:我如何通过React路由器的Link组件传递一个支柱或单个值，比如名称，并在端点捕获它？
这就是我的意思:假设我们在页面/a上。链接将把用户带到/b。现在，我需要通过链接将名称从/a传递到/b。
在反应路由中，如何通过链接将多个数据从一个组件传递到另一个组件？
浏览 0提问于2018-12-07得票数 1
回答已采纳
我很难将一些数据传递到另一个屏幕。目前正在使用useState钩子，我希望在下一个屏幕上使用该值。
NumScreen.JS：
import React, { useState } from "react";
import { Text, TextInput, Button, View, StyleSheet, TouchableOpacity } from "react-native";
function NumScreen({ navigation }) {
const [num, setNum] = useState("0");
浏览 6提问于2020-10-12得票数 0
我正在为React Native应用程序使用React Router。我不确定我在这里遗漏了什么，但我安装了react-router-native并需要历史包，并设置了几个方法，这些方法只是将新路由推送到堆栈上，但什么都没有发生。我点击了(‘console.log’)；以检查它是否正在触发，但它不确定出了什么问题。
import React, { Component } from 'react';
import { View } from 'react-native';
import Splash from './Splash';
import
浏览 1提问于2017-05-31得票数 0
1回答
我有一个React上下文，它向子组件提供“项目”信息，我希望保存上下文类中包含的所有与项目数据相关的内容。这方面的一个例子是从服务器检索项目信息的"refreshProject“函数。挑战是:如何将projectID (即URL )传递到上下文类中？在下面的代码中，我目前将其传递到刷新函数本身，这意味着所有想要调用refreshProject的子组件都需要从URL中提取ID，这很笨拙。我可以想出几种方法来解决这个问题，但我很好奇这里的最佳实践是什么。
这是包含在URL中的项目ID的包装路由：
<Switch>
[other routes here]
<
浏览 2提问于2020-02-04得票数 3
回答已采纳
我有一个子组件：
import * as React from 'react';
import Select from 'react-select';
import { Link } from 'react-router-dom';
import { Button } from '../controls/Button/Button';
import { ISelectedItem } from '../../interfaces/ISelectedItem';
import * as service from
浏览 3提问于2018-01-24得票数 0
1回答
我有一个由RxJS -> 驱动的数据流的react
我用RxJS订阅了我的数据存储，并把它作为一个支柱传递给应用程序：
Model.subject.subscribe((appState) => {
React.render(
<App {...appState}/>,
document.getElementById('app')
);
});
贝娄是如何反应路由器通常使其自我：
Router.run(routes, function (Handler) {
React.render(
<Handler />,
浏览 5提问于2015-05-26得票数 1
回答已采纳
我在App中有一个状态'isLoggedIn‘。
现在，我想将此状态作为道具传递给子组件“秘密组件”。
<BrowserRouter>
<App>
<Switch>
<Route path='/secret' component={Secret} />
<Route path='/' component={Top} />
</Switch>
</App>
</Brows
浏览 3提问于2017-06-17得票数 0
回答已采纳
我在nginx服务器上的/下部署了一个react应用程序。我在/old下部署了一个旧的Django应用程序。
如果我打开一个新的浏览器窗口并直接访问/old，我可以毫无问题地访问Django应用程序。如果我第一次打开react应用程序，所有后续对/old的请求都会重定向到react应用程序。这只能通过关闭浏览器窗口来清除(选项卡是不够的)。
React路由器：
function render(location) {
Router.resolve(routes, location)
.then(renderComponent)
.catch((error) => {
浏览 1提问于2018-10-20得票数 1
2回答
我有一个动态变量，它是在一个组件中生成的，然后该组件路由到另一个组件。如何传递变量？
构成部分A
import React, { Component } from 'react';
class Event extends React.Component {
makeVariable(event)
{ myVariable = '123abc' }
{window.location.replace("/B")}
render () { return (html for page A)
}
export default
浏览 1提问于2018-07-06得票数 1
回答已采纳
我正在接受React培训，我想单击产品标题以显示此产品的详细信息页面。因此，我使用react-router-dom来模拟多个页面。我有一个假的应用程序接口的数据，我显示在一个表中，我想在另一个页面上检索它，因此我检索了数据的ID，并在页面"productsDetails“中检索了此id，但我无法检索其他数据，如标题、描述…… 预先感谢您的解释 Photo project 应用程序 import React, { Component } from 'react';
import './css/App.css';
import './css/Pro
浏览 23提问于2021-05-09得票数 1
回答已采纳
3回答
我创建了一个React应用程序，该应用程序将fetch()用于componentDidMount上的路由文件，以在呈现的组件中构建数据。
这很好用，但是在更新MySQL数据库中的数据时，React组件是静态的。
当MySQL数据库中的数据发生更改时，如何用任何更改更新React组件？请参阅下面的代码示例。
React文件- react.js
class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
da
浏览 1提问于2018-12-20得票数 10
1回答
这显示了如何为旧版本的反应路由器。
有没有人知道如何将流量作为支柱传递给您的顶级组件(react路由器1.0.0 )？
我在文档中看到，在react中，路由器1.0.0路由可以被描述为对象，这意味着您可以传递任意的道具。不过，这对我不起作用：
routes =
path: "/"
flux: flux
component: App
childRoutes: [
{path: "/path/to/path", component: Comp, flux: flux}
]
R
浏览 1提问于2015-09-25得票数 0
回答已采纳
1回答
我有一个文件route.js
import React from 'react'
import { render } from 'react-dom'
import {HashRouter ,Route,Link} from 'react-router-dom'
const Router = (props) => (
<HashRouter>
<div>
<Route exact path="/" render={() => <list data={prop
浏览 1提问于2017-05-23得票数 1
回答已采纳
我需要让我的路由中的变量从JSON数据中更新，有时还会发出数据，但我还没有弄清楚如何将response传递到我的访问路由。
检索JSON的App.js文件：
import React, { useState, useEffect } from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { ThemeProvider } from '@material-ui/styles
浏览 9提问于2020-08-31得票数 0
回答已采纳
3回答
在过去的两天里，我一直在学习React，并且我在理解URL参数方面遇到了困难。
假设我想要一条路线mysite.com/details/1023。该路线的定义如下：
<Route path="/details/:id" render={() => <DishDetails />}/>
现在，我希望在另一个文件中定义的DishDetails对象能够使用id值1023。我该怎么做？我已经在路由url params上找到了教程，但是没有一个说明如何实现这个目标。
下面是我的DishDetails视图现在的样子：
import React, {Compon
浏览 0提问于2018-03-29得票数 2
回答已采纳
我有以下JSON对象...
{ name: "Jessie" }
我希望能够通过我的路由器传递它，这样它就可以显示在我的页面上。例如，这是我的根页面...
StaticPage.jsx
export default class StaticPage extends React.Component {
render() {
return (
<div>
<Router history={hashHistory}>
<Rout
浏览 0提问于2017-07-13得票数 4
回答已采纳
2回答
我创建了一个动态路由(Post)列表和一个单一路由(Post)的组件，但无法确定，如何将道具传递给每个路由。我简化了代码，只留下了与路由有关的内容。
员额构成部分如下：
import React, { Component } from 'react';
import Post from './Post';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
const shutruk = [
{
"id": 1,
浏览 1提问于2019-07-17得票数 0
回答已采纳
随着ResiveRouterV5.1添加了useParams、useHistory和useLocation，以及React钩子和功能组件带来的编码约定的变化，试图找出使用当代版本的react路由器的方法令人困惑。
当使用react路由器编程导航时，如何正确地传递不同urls之间的参数？
例如，假设我有一个名为component_a的组件，它在单击时调用以下内容：
history.push("/home"); //history is defined as the return value of useHistory() from react-router-dom
我将组件_a的
浏览 7提问于2020-04-22得票数 0
回答已采纳
我在我的应用程序中使用react路由器进行导航。
为了在使用Link导航时将一些数据从当前组件传递到其他组件，我们使用：
this.props.history.push('/other-page', { id: 7, color: 'green', .... }))
当单击browser back按钮时，如何从当前组件将数据(对象)传递给前一个组件？
PS：我看到了一些解决方案，其中建议用查询字符串传递一些数据，但我不想使用它，因为我必须传递一个具有许多属性的大对象。
所以有可能用反应路由器？我们的I应该在某些外部组件中使用状态，或者使用Redux存储来共享数据
浏览 0提问于2019-05-16得票数 3
我使用的是react路由器1.0.2，我的路由如下所示：
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="triangles" component={Triangles}/>
</Route
浏览 4提问于2015-12-22得票数 14
回答已采纳
我刚开始使用react本地android，我想知道如何在react中将值从一个组件传递到另一个组件--本地android，我只想知道2件事，
如何传递数据
如何检索数据
提供任何被理解为easy.thanks的参考或链接
浏览 6提问于2017-10-05得票数 1
1回答
如何通过链接传递道具
、、、
这里的反应还挺新鲜的。我正在用api制作一个小菜谱查找程序。在获取数据之后，我将对结果进行映射，并将其显示在组件中。我想做的是在另一条路径中通过另一个组件显示每个菜谱的细节。我不知道该怎么做。我认为我可以通过链接传递映射的食谱，但它不起作用。这是我到目前为止所拥有的。
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App
浏览 2提问于2021-12-16得票数 1
回答已采纳
<TabPanel>
<Dietracker dataFromParent={date} />
<Link to="/cdiet">
<button onClick={this.closeTabBox}>edit</button>
</Link>
</TabPanel>
当单击编辑按钮时，我正在尝试将dataFromParent={date}传递给navigator.js中的<CDietOverview />，但没有更改路径
<Route path="
浏览 5提问于2021-09-24得票数 1
15回答
我使用的反应反应-路由器。我试图在一个反应路由器的“链接”中传递属性
var React = require('react');
var Router = require('react-router');
var CreateIdeaView = require('./components/createIdeaView.jsx');
var Link = Router.Link;
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler
浏览 9提问于2015-05-08得票数 223
回答已采纳
我正在升级到v2，在文档中似乎找不到如何从路由器上下文(或其他方式)访问当前查询的示例。
构成部分的相关部分：
var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var routes = require('./Routes');
var browserHistory = ReactRoute
浏览 1提问于2016-01-06得票数 1
回答已采纳
作为标题状态，我曾经有一个有状态组件的页面，它根据对url所做的更改获得不同的支持。
现在，升级到反应路由器v6，我真的不明白如何使它再次工作。我理解现在解决这个问题的唯一方法是使用钩子(如useNavigate )，但我不知道如何在代码中实现这一点。我已经阅读了反应路由器v6文档，但仍然不知道如何解决我的问题。
在代码下面。代码从子组件中排序，直到index.tsx。组件是广泛的，基本上是一个状态组件，它从道具中获取其状态。根据所给的道具，它将相应地显示其内容。
有人能为我的装备提出一个解决方案吗？
CalculatorPage.tsx
import Calculator from "
浏览 1提问于2021-11-14得票数 2
回答已采纳
1回答
这在“react路由器-dom”："^5.3.0“中有效。
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Api from "./Api";
const api = new Api();
const App = () => {
return (
...
<Router basename="/my-app">
<Switch>
<Route
浏览 4提问于2022-11-14得票数 0
回答已采纳
2回答
我正在做我的第一个React项目，我有点纠结于如何处理这种情况。
Header组件支持多个不同的主题，我需要能够根据所显示的页面进行切换。下面是我的根组件：
export default class App extends React.Component {
render() {
return (
<Router>
<div>
<Header theme='light' />
<
浏览 0提问于2017-10-20得票数 0
在React路由器v5中，我们可以以这样的方式提供一个404响应代码：
<Route path="*" component={NoMatch} status={404}/>
但是我们如何使用React路由器v6来实现它呢？
浏览 9提问于2021-12-08得票数 3
回答已采纳
3回答
我正试图通过创建一个ProtectedRoute组件来创建一个条件路由，正如选择的答案所描述的那样。
条件来自传递到ProtectedRoute组件的道具。请看下面的组件和路由代码。
import React, {Component} from "react";
import { Route } from 'react-router-dom';
import { Redirect } from 'react-router';
class ProtectedRoute extends Component {
render() {
浏览 0提问于2018-10-17得票数 0
回答已采纳
所以我正在做一个项目，将React，Express.js+Passport和Webpack整合在一起。我理解通过react-router将所有内容推送到“主”React组件，然后让它散列出为给定路由显示的内容的概念。我认为，这在这里会很好用。坦率地说，我是一个新的反应。
我担心的是：
1)我可以/如何仍然使用Passport来验证我的路由？如果我正确理解了react-router，我会在我的快速app.js文件中有一条路由，它指向一个名为<Application/>的React组件。但是，Passport需要router.get('/myroute', isAuth
浏览 0提问于2015-06-12得票数 26
回答已采纳
我试图在firebase中将一个竞赛条目添加到我的竞赛数据库中，但是我得到了错误：
TypeError:未定义不是对象(计算'route.params.id')
这是我的密码：
const AddEntry = ({route, navigation}) => {
const id = route.params.id
const [title, onChangeTitle] = React.useState('')
const [image, setImage] = React.useState("/")
const
浏览 3提问于2022-06-13得票数 1
回答已采纳
我正在尝试使用react-router 1.0.2在react组件中执行重定向。
在我的主app.js中，我创建了一个散列历史：
import createHashHistory from 'history/lib/createHashHistory';
const history = createHashHistory();
...
ReactDOM.render(
<RelayRouter history={history} routes={routes} />,
document.getElementById('root')
)
浏览 0提问于2015-12-23得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
