React-router v4 -显示当前页面

React-router v4 是一个用于 React 应用程序的路由库。它提供了一种在单页面应用中管理路由的方式，使得页面之间的切换变得简单和灵活。

React-router v4 的主要特点包括：

声明式路由：React-router v4 使用声明式的方式定义路由，通过组件的嵌套和配置来实现页面之间的切换。这种方式使得路由的配置更加清晰和易于维护。
动态路由匹配：React-router v4 支持动态路由匹配，可以根据路由参数的不同来渲染不同的组件。这使得开发者可以根据需要动态地生成页面内容。
嵌套路由：React-router v4 支持嵌套路由，可以在一个组件中嵌套另一个组件作为子路由。这种方式使得页面之间的层级关系更加清晰，可以更好地组织和管理路由。
路由转场动画：React-router v4 支持路由转场动画，可以在页面切换时添加过渡效果，提升用户体验。
历史管理：React-router v4 提供了一个历史管理对象，可以通过编程方式进行路由的跳转、前进和后退操作。

React-router v4 的应用场景包括但不限于：

单页面应用程序：React-router v4 是构建单页面应用程序的理想选择，可以通过配置路由来管理页面之间的切换。
多页面应用程序：React-router v4 也可以用于多页面应用程序，通过配置路由来管理不同页面之间的跳转。
嵌入式应用程序：React-router v4 可以嵌入到其他框架或应用程序中，用于管理内部的页面切换。

腾讯云提供了一些相关产品和服务，可以与 React-router v4 结合使用，包括：

腾讯云 CDN：用于加速静态资源的分发，提升页面加载速度。链接地址：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行 React 应用程序。链接地址：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：用于存储和管理应用程序的静态资源，如图片、音视频文件等。链接地址：https://cloud.tencent.com/product/cos

请注意，以上仅为示例，实际选择产品和服务应根据具体需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

React-router v4 -显示当前页面

reactjs、react-router

我希望能够在顶部显示当前页面(例如，在页眉中)，但我在获取当前路径名时遇到了问题。在App中，我有： history: React.PropTypes.object,并将当前路径名传递给一个组件： <Header currentPathname

浏览 3提问于2017-01-19得票数 4

回答已采纳

1回答

反应式onEnter支柱-路由器v4

javascript、reactjs、react-router、frontend

我在用react-router v4。我感到困惑的是，当我单击<Link>组件时，路由会立即更改。在获取数据之前，我希望停留在当前路由上，而不是切换路由，然后获取数据。我发现在react-router v3中有一个onEnter钩子，但是现在在react-router v4中，它被废弃了。那么，在单击<Link>组件之后，在更改路由之前，如何获取数据呢？

浏览 2提问于2017-08-01得票数 3

回答已采纳

1回答

React-管理多个页面

reactjs、react-router、pwa

我发现的问题是我不确定如何管理另一个页面。项目中有一个名为"index.html。我是否应该创建更多并以某种方式在它们之间切换“的html文件。我不确定是否应该将其开发为一个动态页面，因为我会有数十个不同的页面。最佳实践是什么？

浏览 1提问于2018-07-03得票数 0

3回答

如何在React中不点击<Link>切换页面？

reactjs

在某些情况下，我需要在不单击任何内容情况下切换页面。让我点击一些btn，url等等。另外，我不想重新加载一个页面。有什么解决方案吗？

浏览 25提问于2020-06-04得票数 0

回答已采纳

3回答

React路由器无需重新加载页面即可更改url

reactjs、react-router

当我使用react-router 0.13.3时，它是正常的:我正在改变url，并且在不重新加载的情况下进行转换。路线import App from '.

浏览 1提问于2016-04-26得票数 19

2回答

如何用reactjs实现网站导航

reactjs

网站的每个页面主要有3个部分(1.页眉2.正文3.页脚)。因此页眉和页脚对于每个页面都是相同的，而正文将不断变化。我是否应该创建页眉和页脚组件，然后将它们包括在网站的每个页面。这是一个好的设计吗？如何突出显示特定页面的导航菜单选项。例如，如果我在contactus页面上，那么ContactUs菜单选项应该突出显示。同样，如果我是一个主页，那么“主页”应该突出显示。

浏览 7提问于2018-02-22得票数 3

回答已采纳

1回答

如何在react-router v4中访问抽象当前路径

javascript、reactjs、react-router、react-router-v4

使用react-router v4，我应该如何获取当前的抽象路径。

浏览 0提问于2017-08-15得票数 0

1回答

从react- />使用<路由路由器时，子项未定义

javascript、reactjs、react-router

仅供参考，我使用的是react-router的3.0.0版本。目前，我正在添加一个作为包围子组件的页脚的父路由组件。我的路由当前如下所示： export default(store) => {<Route component={Footer} <Route</div> <Menu /> </di

浏览 14提问于2019-09-23得票数 1

2回答

class Link extends React.Component{ this.props.history.push('/');此操作所关联的按钮可正确更改react-routerv4中的页面。我目前在主js文件中有这个if语句(这是我练习理解v4的一个小项目)，所以我想这可能是因为我没有扩展一个类。有谁知道为什么相同的代码不能在主文件中工作，有没有解决这个问题的办法？所有react-router的v4更

浏览 3提问于2017-05-02得票数 2

1回答

如何在ReactRouter 4的组件之外导航？

reactjs、react-router

在React Router (v3)中，我可以接受服务器响应，并使用browserHistory.push转到相应的响应页面。但是，这在v4中不可用，并且我不确定在React-Router V4中处理这个问题的合适方法是什么。在下面的示例中，当服务器返回成功时，用户被带到购物车页面export function addProduct(props) { return dispatchlocalStorage.setItem(

浏览 1提问于2017-06-14得票数 1

0回答

默认路由参数react

reactjs、react-router

我有一个关于在React-Router v4中设置默认路由参数的问题。我的代码当前使用url '/ Channel /:channelName‘重定向到channel组件，但我希望它自动重定向到'/channel/general’。

浏览 6提问于2017-11-25得票数 0

1回答

如何处理不匹配模式的路由

react-router

我正在运行用例，如果找不到匹配的路由，我希望加载一个默认页面。例如，它将加载一个“未找到的页面”页面。

浏览 3提问于2017-04-05得票数 2

回答已采纳

2回答

在react-router v4中，我们还能在应用容器中执行`this.props.children`吗？

react-router、react-router-v4

在react-router v2中，我们可以 <Route path="/" component={App}>component={PostsNew} /> </Route>然后在App容器中显示

浏览 0提问于2017-04-13得票数 2

3回答

React路由器在更改路由和回路由时保持查询参数

reactjs、react-router

我有一个基于react-router v4的不同页面的网站。每个页面都有基于url query的过滤器，这意味着过滤器设置存储在url上，比如mysite.com/page1?我的目标是在用户返回另一个页面( mysite.com/page2)时保持查询中的筛选值。

浏览 1提问于2019-06-17得票数 2

回答已采纳

1回答

使用react-router-dom，如何从React组件外部访问browserHistory对象？

reactjs、redux、react-router、react-redux、react-router-dom

使用之前的react-router，我可以做到以下几点：从我的actionCreators文件中，我可以这样做example, user logged in successfully)..但是有了新的react-router-dom (v4browserHistory了，而且访问历史对象的唯一方法是从React组件属性中访问 th

浏览 1提问于2017-04-06得票数 5

回答已采纳

1回答

访问Redux reducer中的URL

reactjs、redux、react-router-v4、react-intl

return state; return state;}; locale的初始值来自当前URL。我正在使用React-Router v4

浏览 27提问于2019-06-19得票数 1

回答已采纳

1回答

仅在一个页面上显示React组件

reactjs、react-router

我正在建立我的第一个SPA与反应，但我的反应理论还没有。我有一个主组件，它呈现一个头组件。标题组件呈现三个组件，即导航、声明和条形图。问题是，索赔和酒吧只应在主页上，而不是在其他网页上。我不太清楚该如何做，我知道我必须从主要部门拿出来，但不确定我是否应该在路线上工作，是否把所有的东西都放在主页组件上，或者是否有一个最佳的实践。var routes = ( <Main> &l

浏览 0提问于2017-03-30得票数 1

回答已采纳

1回答

配置react-路由器v4

javascript、reactjs、react-router、frontend

我有两个页面，管理和登录页面。如果用户没有登录管理页面必须重定向到登录页面，如果用户登录登录页面必须重定向到管理页面。在react-router v3中我有onEnter和onChange方法，在这个方法中我可以存储和查看用户是否登录并进行replace路由，但是在v4中不存在这个方法，所以所有包含onEnter和onChange

浏览 0提问于2017-05-25得票数 1

1回答