React Router 4-访问子参数
React Router 4是一个用于React应用程序的路由库，它允许开发者在应用程序中实现页面之间的导航和路由管理。React Router 4是React Router的最新版本，它采用了基于组件的路由配置方式，提供了更简洁、灵活和易于使用的API。
访问子参数是指在React Router 4中如何获取和使用URL中的子参数。子参数是URL路径中的一部分，可以用于传递额外的信息或参数给组件。React Router 4提供了两种方式来访问子参数：通过URL参数和通过嵌套路由。
- 通过URL参数访问子参数：
- 在路由配置中，可以使用冒号（:）定义URL参数，例如：
/users/:id。 - 在组件中，可以通过
this.props.match.params来访问URL参数的值，例如：this.props.match.params.id。
- 在路由配置中，可以使用冒号（:）定义URL参数，例如：
- 通过嵌套路由访问子参数：
- 在路由配置中，可以使用嵌套路由来定义子路由，例如：
- 在路由配置中，可以使用嵌套路由来定义子路由，例如：
- 在组件中，可以通过
this.props.match来访问嵌套路由的参数，例如：this.props.match.params.id。
React Router 4的访问子参数功能可以应用于各种场景，例如在用户管理系统中，可以使用子参数来显示和编辑特定用户的详细信息。另外，React Router 4还提供了其他丰富的功能，如路由重定向、路由过渡动画、路由守卫等，可以根据具体需求进行灵活配置和使用。
腾讯云提供了云计算相关的产品和服务，其中与React Router 4相关的产品是腾讯云的云服务器（CVM）和负载均衡（CLB）。
- 腾讯云云服务器（CVM）：提供了可靠、安全、灵活的云服务器实例，可以用于部署和运行React应用程序。 产品介绍链接地址：https://cloud.tencent.com/product/cvm
- 腾讯云负载均衡（CLB）：提供了高可用、高性能的负载均衡服务，可以将流量分发到多个云服务器实例上，提高应用程序的可用性和性能。 产品介绍链接地址：https://cloud.tencent.com/product/clb
通过使用腾讯云的云服务器和负载均衡，可以为React Router 4应用程序提供可靠的基础设施和高性能的网络访问。
相关·内容
2回答
这是提供React Router功能的Apps服务器-它的功能正如我所期望的那样。
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import Search from "./com
浏览 12提问于2019-12-02得票数 0
回答已采纳
我有一个简单的应用程序，从我的API加载电影列表。当用户单击一部电影时，它使用react路由器将其发送到带有电影ID的路径，并且路由器呈现播放器组件，该组件在电影API repsonse中查找电影id，并将其作为道具传递给它，用户可以观看它。这个可以正常工作。
我的问题是，当页面重新加载时，组件不再能够访问来自初始API调用的数据，并且什么都不起作用。为什么当页面重新加载时，API调用不会重新运行？
import React, { useState, useEffect } from 'react';
import { Helmet } from 'react-helm
浏览 13提问于2019-11-05得票数 0
回答已采纳
我的项目没有任何错误，它只是没有渲染任何东西。我是不是遗漏了什么？
在App.js中，我使用渲染道具进行数据传输。
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
return (
<div className="App">
<Router>
浏览 0提问于2021-11-15得票数 3
回答已采纳
我发现使用<React component>和<React render>在react-router-dom 6.x中可能会被弃用，所以我遵循删除了component属性，而是将组件嵌套为<Route >节点的子节点。它工作得很好，直到我到达使用动态参数的路由，它抛出了一个错误。
我从..。
<Route exact path={`/:category`} component={CategoryPage} />
为了..。
<Route exact path={`/:category`}>
<CategoryPage /&g
浏览 0提问于2020-05-20得票数 0
2回答
这个问题把我逼疯了，我得到了一个由create-react-app创建的简单的应用程序，我正在使用React-Router。
联署材料X：
<Router>
<Route path="/pages/:pageId" component={Page} />
</Router>
在Page中，我在componentDidMount上有一个fetch，它在第一次加载路由时正常工作。
例如，我访问：/pages/13，然后它获取页面数据，但是当我打开：/pages/13，然后单击一个链接组件(从React-Router导入)，将我重定向到：/
浏览 1提问于2018-04-27得票数 3
回答已采纳
我无法转到另一个页面，因为this.props.history似乎没有定义。下面是我看到的错误的截图。请注意，我使用登录组件中的this.props.history.push("/welcome")呈现了我的欢迎组件，然后它运行良好。
这是我的App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from "./Components/Login";
浏览 2提问于2019-11-26得票数 2
回答已采纳
在react-router版本0.13.3中，我有
Router.run(routes, createBrowserHistory, function(Handler, state) {
React.render(<Handler query={ state } path={ state.pathname }/>, document.getElementById('app'))
});
在react-router 1.0.0.rc3中，我有
let history = createBrowserHistory();
React.render(<Rout
浏览 0提问于2015-10-17得票数 3
1回答
为什么我们要把参数放到module.hot.accept()中？如果我们什么都不放，webpack.HotModuleReplacementPlugin可以工作，但是React组件也会丢失它的状态数据。如果我们使用react-hot-loader，我们应该将参数放到accept方法中，但我不知道第一个参数是什么意思，也不知道为什么回调应该再次require并获取default
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {AppContainer
浏览 7提问于2018-08-16得票数 0
2回答
我想知道是否有任何方法可以将参数(或变量)传递给不同的组件(例如，如果我单击一个按钮，该按钮的onClick函数可以将我重定向到另一个组件，该变量应该立即加载，并显示一个不同的屏幕)我正在使用react-router 3.0.0，我希望有类似的功能，如react-native
Actions.somepage({ls: variablename});
当该页面加载时，应该有一个像this.props.ls这样的函数来获取该值。
有人能告诉我怎么做吗？(我正在使用this.context.router.push('/');进行路由)
浏览 7提问于2017-05-27得票数 0
2回答
我有几个部件。当param处于路径时，将处于活动模式，rest将处于非活动模式并显示消息。
所有组件都出现在页面上。一个是活跃的，其余的是不活跃但可见的。
组件需要读取url参数。
如果我使用路径，那么在每个时刻，我只能显示一个组件。想到的第一个解决方案是没有路径，只有路径旁。我需要读取app.js上的路由参数以显示active/deactive，也可以在app.js内部的子组件中读取相同的params。
当我们没有可匹配的路径时:如何在app.js中读取路由参数？如何将路由参数传递给子组件？
import React, { Suspense } from 'react
浏览 0提问于2019-03-16得票数 0
1回答
我正在尝试设置我的react.js环境来构建一个UI工具包。我使用的是react路由器，但由于某种原因，当我单击从Index.js呈现的链接时，URL会发生变化，但内容保持不变。它只是继续显示来自index.js页面的内容，而不是更改为我单击的链接的内容。我在控制台上没有收到任何错误消息。
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import
浏览 3提问于2016-05-09得票数 0
回答已采纳
我使用react路由器v4，我想通过编程导航到其他url (我经常在我的商店需要这个)。在react路由器v3中，这是非常简单的:您只需要使用browserHistory.push()。但这一次很复杂。我不能像那样从任何反应组件中使用。所以，我试着从上下文中获取路由器。这是我的部件
'use strict';
import React, { Component } from 'react';
import { observer, Provider } from 'mobx-react';
import { BrowserRouter, Match
浏览 4提问于2017-01-04得票数 0
回答已采纳
1回答
今天，我使用了React和react-router-dom。我想使用我自己的类创建我自己的"Route“，但是我不知道如何在呈现页面之前获得id。
我的代码如下：
import React from "react"
import { Route, Redirect } from "react-router-dom"
import { useAuth } from "../contexts/AuthContext"
export default function ServerRoute({ component: Component, ..
浏览 21提问于2021-05-16得票数 0
回答已采纳
给定以下路由器：
import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import {Provider as StoreProvider} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';
const App = ({store}) => {
return (
<StorePro
浏览 6提问于2017-05-30得票数 0
回答已采纳
我知道使用react-router-dom道具的方法。就是这样的
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
const AAA : React.FC<RouteComponentProps> = ({history}) => {
.
.
.
}
我知道如何使用由父组件发送的属性，如下所示
import React from 'react';
const AAA = props => {
.
.
浏览 0提问于2020-08-05得票数 0
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div cl
浏览 5提问于2022-02-26得票数 2
回答已采纳
我确实升级了从反应0.13到最新的。这里是我更改的依赖项列表。
react: 0.13.3 -> 0.14.3
react-dom: none -> 0.14.3
react-router: 0.13.3 -> 1.0.3
react-history: none -> 1.0.3
react-intl: 1.2.0 -> 1.2.2
intl: 1.0.0 -> 1.0.1
但我不能再让翻译工作了。
Uncaught :未能找到Intl消息: test
// app.js
var React = require('react
浏览 5提问于2015-12-27得票数 1
回答已采纳
对于我的组件，我设置了上下文
ManageCoursePage.contextTypes = {
router: PropTypes.object
};
我的类方法如何知道我正在引用react路由器自动将我重定向到另一个URL？
this.context.router.push('/courses');
下面是我的组件代码：
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators
浏览 14提问于2016-08-15得票数 1
回答已采纳
当我部署使用React和React-router构建的网站时，我的网站的登录页面工作得很好，但当我试图导航到我的网站时，我遇到了403禁止响应。我使用Apache作为HTTP服务器，服务器的常规配置如下：
<IfModule mod_php.c>
php_value date.timezone Europe/Brussels
</IfModule>
<IfModule mod_userdir.c>
UserDir /var/www/users/staff/*
</IfModule>
仅供参考，该网站位于/var/
浏览 30提问于2021-02-23得票数 0
我希望将react-router配置为在呈现任何路由之前等待Firebase登录(或注销)。
我已经看到react-router有一个onEnter()钩子，但这似乎是一个即时回调，我还没有完全弄清楚如何让react-router等待直到firebase触发firebase.auth().onAuthStateChanged(...)事件。
react-router是否包括一些处理此类情况的功能？
浏览 3提问于2016-07-15得票数 4
回答已采纳
3回答
const Home = () => <div>Home</div>
const App = () => {
const someVariable = true;
return (
<Switch>
{/* these are good */}
<Route exact path='/' component={Home} />
<Route
path='/about'
render={(props) =>
浏览 4提问于2018-08-29得票数 8
回答已采纳
2回答
我正在和ReactJS一起做SPA。我有一个根组件App，然后是几个子组件。在App组件中，我尝试存储一些应用程序级别的状态，如登录的用户id和其他数据。然而，我没有看到我的状态向下子组件传播。
应用程序
import { Router, Route, Link, IndexRoute, browserHistory, hashHistory } from 'react-router';
import ParameterContainer from './components/parameter/parameter-container';
import NavM
浏览 2提问于2017-02-20得票数 0
我有一个反应应用程序，其中反应路由器是初始化在App.js。当url是localhost:3000/id时，主组件被呈现给App.js，但是我需要从App.js获取id变量来运行initBusinessDetails() --如何从App.js访问id变量。
App.js代码
import React from 'react'
import axios from 'axios';
import ReactLoading from 'react-loading';
import { Route, Link, BrowserRouter as Rou
浏览 0提问于2020-01-08得票数 1
回答已采纳
我对流星进行了升级，并开始收到createContainer()的反对警告。因此，我已经尝试实现withTracker，但是现在我得到了Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.。我不知道我错过了什么，有人能指出我的错误吗？
路径：App.jsx
import { Meteor } from 'meteor/meteor';
import React
浏览 0提问于2017-10-25得票数 1
回答已采纳
我刚开始做出反应，在从API获得响应后，我一直试图重定向到另一个组件。
我试过使用历史、位置和重定向，但是重定向从未发生过。
另外，我在使用上述所有内容时都会得到undefined。
我不确定这是否是因为我的应用程序是在路由器之外定义的，如果这是我仍然无法解决这个问题的原因。
这是我的代码：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
impo
浏览 1提问于2021-03-11得票数 0
2回答
在user.js文件中，道具是空的，我无法访问道具中的match。我不明白为什么props会以空对象的形式出现。
App.js文件
import "./App.css"
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import Home from "./components/Home";
import About from "./components/About";
import User from "./
浏览 2提问于2021-11-09得票数 1
回答已采纳
2回答
我有一个简单的应用程序，使用redux和react-router。我将我的应用程序组件包装在一个提供者标签中，以便它可以访问商店。我(在App.js中)在App.js中连接了mapStateToProps和mapStateToDispatch。我不确定如何将在App.js中定义的函数传递给子组件，因为我正在使用路由。我试着做渲染技巧，但它不起作用。如果我可以将它传递给CelebrityPage组件，我将如何在文件中接收它？任何帮助都将不胜感激。
这是我的App.js
import React, { Component } from 'react';
import { conne
浏览 0提问于2020-10-24得票数 0
我正在构建一个使用Unsplash呈现用户照片的练习应用程序。我正在使用React和Redux。使用react-router-dom时，我尝试按照文档进行操作，但我发现设置起来非常混乱。这是我到目前为止所掌握的。当我单击搜索返回的结果列表中的一个结果时，我希望它呈现一个用户页面配置文件。 index.js (确保我正确设置了react-router-do )： import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react
浏览 18提问于2020-11-25得票数 1
4回答
如何使用react路由器v4获得当前路径？
我尝试了以下几点，但没有结果：
const currentLocation = this.props.location.pathname;
错误：Cannot read property 'pathname' of undefined
这是我的Routes.js文件：
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
imp
浏览 3提问于2018-05-24得票数 10
回答已采纳
我有一个小应用程序运行在React + Redux与redux承诺中间件，以处理承诺API调用。我想管理每个api调用的状态(加载、成功和错误)。因此，当更改applyMiddleware参数时。
import React from 'react';
import ReactDOM from 'react-dom';
import promiseMiddleware from 'redux-promise';
import { Provider } from 'react-redux';
import { createStore,
浏览 2提问于2017-03-17得票数 2
回答已采纳
我是ReactJS和JavaScript的新手，我试图通过URL将ID传递给"UserInfo.js"，接下来我尝试在"GetUser.js“中获取这个id，并通过这个ID请求API显示信息(如登录、ID等)。来自DataBase。我对反应有问题。API在swaggerUI中工作得很好。
GetUser.js代码：
import React,{ Component } from 'react';
import { stringify } from 'uuid';
import UserInfo from './UserInfo&#
浏览 8提问于2021-12-20得票数 1
我有一个带有click事件的按钮，一旦用户成功登录，它会调用一个函数来生成API来登录用户。我想将用户重定向到/overview。我不完全确定如何使用react-router-dom，我所看到的一切都是使用react-router和使用Class Based Component，而不是我正在使用的Function Based Component。
下面是我的路线的设置方式
import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
im
浏览 0提问于2019-03-14得票数 1
回答已采纳
3回答
我有(例如)React中的两个组件。第一个是app.js，它是根组件。它导入一些JSON数据并将其放入其state中。这工作得很好(我可以在React devtools中看到它)。
import data from '../data/docs.json';
class App extends Component {
constructor() {
super();
this.state = {
docs: {}
};
}
componentWillMount() {
this.setState({
docs:
浏览 19提问于2017-01-24得票数 33
回答已采纳
PrivateRoute.js
import React from 'react';
import { Route, Navigate } from 'react-router';
const PrivateRoute = ({component:Component, ...rest}) => {
return <Route {...rest} component={(props) =>{
const token = window.localStorage.getItem('to
浏览 1提问于2021-11-18得票数 2
所以我只想在主页上隐藏<Header/>。但是我需要它显示在其他页面上--例如，当用户登录时。
我认为这是可能的Routes，两者都有家，但做了不同的事情。
我认为这样做是有可能的：
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/layout1" />
</Route>
<LoginLayoutRo
浏览 6提问于2020-08-05得票数 2
回答已采纳
我正在尝试使用react设置验证帐户，并在我的App.js文件中有以下内容
App.js
import SigninPage from './pages/signin';
import ResetPasswordPage from './pages/resetPassword'
import VerifyAccountPage from './pages/verifyAccount'
...
...
import { useHistory } from 'react-router';
import { logout } f
浏览 5提问于2021-06-19得票数 4
回答已采纳
我有一个网站组合的图片库，我试图让每个图片链接到react-router-dom中的不同页面，但我似乎不能理解代码有什么问题。
在过去的三天里，我一直在为此绞尽脑汁，尝试了不同的方法，但都无济于事。有人能帮帮我吗？我对编码还是个新手。
这是我的应用程序页面，我在这里声明了我的路线
import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Inicio from './components/Routes/Inici
浏览 2提问于2021-12-02得票数 1
我正试图理解使用react路由器(v2.4.0)访问当前应用程序位置的"react“方式是什么。在新的反应路由器破坏改变等之前，我可以使用
this.context.router.getCurrentLocation()
现在看来，我再次可以将路由器注入到组件的上下文中，但是路由器实例本身并不包含api来获取与当前位置或查询参数等相关的任何内容。因此，出现了一个逻辑问题：“我做得对吗？”
经过一些研究后，我发现我正在使用的反应性路由器的路由组件是将位置注入到映射到该路由的组件的属性中。太棒了！然而，在我的例子中，我有多个嵌套在映射到路由的主组件中的组件层，因此：“我应该一直把this.
浏览 2提问于2016-05-16得票数 0
回答已采纳
有没有一个使用react-router但用typescript 1.6+ TSX开发的react应用程序的完整运行示例？
浏览 25提问于2015-10-01得票数 3
1回答
无法从mobx提供程序接收存储
、、、、
我使用的是react-router 3，下面是我的路由代码：
export default (
<Route>
<Route path="login" component={LoginPage}/>
<Route path="/" component={App}>
<IndexRoute component={Dashboard}/>
<Route path="dashboard" component={Dashboard}/>
&
浏览 3提问于2017-05-11得票数 0
我遇到了一个问题，不管我做了多少研究/谷歌搜索，我似乎无法解决这个问题，最近两天一直在处理这个错误。首先，我试图在网上找到其他人可能有的答案，但我似乎想不出来，所以现在我需要问一个更有经验的人我做错了什么，请看看我的错误和代码图片，看看你是否可能发现什么东西，我不能.隧道视觉..。
前端是reactjs，后端是节点/表达式。
当我打开主屏幕页面时，每个产品都会从后端加载，没有问题，但是一旦我单击单个产品尝试获得具有唯一id的特定产品页面，初始骨架加载会短暂地在没有任何产品信息的情况下获得，然后就会出现以下错误。
“未处理的拒绝(TypeError)：无法读取未定义的属性(读取'para
浏览 1提问于2021-11-30得票数 0
回答已采纳
4回答
我有两个组件：App和Contact。我只想在我正在传递的联系人页面上打印id，但是当我在contact组件中console.log(this.props)时，它显示的是一个空对象。
import React from "react";
import Contact from "./Contact";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends React.Component {
render() {
浏览 0提问于2019-10-15得票数 2
回答已采纳
2回答
我写了这段代码： import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router, Route } from "react-router-dom";
import AboutPage from './pages/aboutPage'
ReactDOM.render(
<React.StrictMode>
<Ro
浏览 31提问于2021-11-07得票数 2
2回答
为SPA工作的路由器，但我似乎无法让它呈现出除了以外的其他任何东西。
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import Parameter from './components/parameter/Parameter';
class App extends React.Component
浏览 2提问于2017-02-15得票数 0
回答已采纳
2回答
我使用的是React 0.14.0，React Router 2.0.0-rc4，browserify 11.2.0，babelify 7.2.0。
以下是我的路由器代码：
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Departments} />
<Route path="goals" component={Goals} />
<
浏览 1提问于2016-01-13得票数 7
我正在试着用React.js做一个新闻订阅网站。 如何制作带有新闻ID的路由器？我正在尝试这样的东西： <Route path="/news/:id">
{ ( {id} ) => <NewsPiece newsID={id}/> }
</Route> 但没有成功。我试着查找它，但没有找到任何方便的方法。 下面是我的App.js作为主文件。 import React from 'react';
import NavBar from './components/NavBar'
import Cont
浏览 41提问于2021-05-29得票数 0
回答已采纳
4回答
我通过location.state将之前获取的数据传递给后续组件。但是，如果用户点击刷新我的历史记录，并且位置状态对象被清除，则可以很好地工作。我可以看到这是预期的功能。我的问题是，我是否应该使用redux来保持这些数据的持久性？如果是这样的话，在我看来，我失去了react-router的很多好处。在使用react-router时，人们如何处理状态？
浏览 8提问于2020-02-04得票数 2
我想创建可重用的路由组件
import React from 'react';
import { Route } from 'react-router-dom';
interface ITProffesion {
proffesion: string;
}
export const ITRoleRouter: React.FC<ITProffesion> = ({ proffesion }) => (
<Route exact path={`/${proffesion}`} key={proffesion}>
&
浏览 0提问于2021-01-28得票数 1
1回答
我用react+sass创建了我的项目组合，我添加了一些状态和jquery动画，我将我的项目组合部署在Github-pages上。这个项目组合是用ReactJS制作的。当我打开链接时，它显示为白色，只有标题和图标。控制台上没有错误，有人能帮我吗？ 我的App.js import React from 'react';
import {HashRouter as Router, Route} from 'react-router-dom'
import './components/styles/main.scss'
import Home fro
浏览 21提问于2020-02-02得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
