页面合并是为了Reactjs路由吗？
页面合并不是为了Reactjs路由。页面合并是指将多个网页或组件合并成一个页面或组件的过程。在前端开发中，页面合并可以用于优化网页加载速度，减少HTTP请求次数，提升用户体验。通过合并页面或组件，可以减少浏览器请求的资源数量，减小页面的体积，加快页面加载速度。
在React.js中，路由是用于管理不同页面之间的切换和导航的工具。React Router是React.js的官方路由库，它提供了一种在React应用中实现路由功能的方式。通过React Router，可以定义不同的路由规则，将不同的URL路径与对应的组件关联起来，实现页面之间的切换和导航。
页面合并和Reactjs路由是两个不同的概念，但在实际开发中，可以结合使用。通过页面合并可以减少页面的数量和体积，提升加载速度，而Reactjs路由可以实现页面之间的切换和导航，提供更好的用户体验。在使用React.js进行开发时，可以考虑使用页面合并来优化网页加载速度，并结合React Router来管理页面之间的切换和导航。
相关·内容
2回答
我正在开发一个样例reactjs应用程序(正在学习中)。我有一个页面，其中列出了用户列表和添加按钮，以添加新用户。
当我单击add按钮时，我应该导航到用户表单以创建新用户。
在单击user表单中的submit按钮后，它应该导航回第一个页面，在那里它应该列出用户列表和新用户。
如何在react中的页面之间导航？
浏览 1提问于2016-10-17得票数 9
回答已采纳
我已经成功地完成了一个使用电子反应应用程序的包装。它运行良好并加载主页，但当我尝试路由时，它根本无法工作。我正在使用reach路由器作为我的项目，我猜我必须为此目的调整我的路由配置。
FYI，它不是我提出的网络请求，它只是从主页上路由到登录页面，而不需要API调用。但什么都没发生。
import { Router } from '@reach/router';
const App = () => (
<Provider store={STORE}>
<Main>
<Router>
浏览 1提问于2019-01-02得票数 2
回答已采纳
我的module.scss文件有问题。
对于多个页面，我使用了react路由器-dom。
对于每个页面，我在"body"标记上都有不同的样式，但是样式重叠。
如何在没有重叠样式的情况下对每个页面的主体标记进行样式化？
或者，我如何确保当更改页面时，它不会加载另一个页面上使用的样式？
浏览 1提问于2021-02-21得票数 0
回答已采纳
1回答
我不明白如何在react js中链接不同的页面。我使用的是react路由器，通过使用链接和路由标签，我可以更改url，但不能获取内容。我能尽快得到答复吗？
浏览 1提问于2019-07-10得票数 0
1回答
我正在尝试创建一个路由，该路由将捕获所有无效的URL，然后在没有管理布局的情况下向用户显示我的自定义404页面。我的问题是，我的404页面总是显示Admin布局(即使用户没有登录)。我的routes.js里有这些路线
export default [
<Switch>
<Route exact path="/password-reset" component={ResetPassword} noLayout />,
<Route exact path="*" component={NotFound} noLayout/
浏览 0提问于2019-03-18得票数 1
回答已采纳
3回答
ReactJS中的路由
、、、、
有人能给我解释一下Reactjs中路由是怎么工作的吗？
browserHistory.push('/location')
只更新地址栏，不重定向到它。
browserHistory.goBack()
仅当页面以前被访问过时才有效，因此得名。这让我很难理解browserHitory.goForward()是如何工作的？
我一直在尝试在成功登录后重定向到仪表板。就这样。
据我所知，React不允许重新加载页面。如果我们尝试刷新页面或在url中写入地址，它将显示cannot GET /path错误；除非请求是在服务器上发出的。我试图在服务器上创建路由，但无法获得如何实现它的语法。我只
浏览 0提问于2017-05-01得票数 7
当你似乎需要在reactjs中转发时，我们通常会放一个链接或按钮，然后消费者点击它，然后页面重新加载路由器的相应路径。现在，当我请求post并且响应状态为200时，我希望页面转到路由器的其他路径。它不能使用链接或按钮，reactjs可以使用代码来实现吗？喜欢: CertainComponent.setPath(otherPath)；CertainComponent.turn；我的英语不好，可能不清楚我想做的功能。谢谢!
浏览 1提问于2016-05-07得票数 0
2回答
我是reactjs的新手-如果我在子页面上遇到错误页面-因为url是错误的-我正在寻找一种将页面重定向到另一个页面的方法。
所以de/dienstleistungen/isdfisf -拼写错误重定向到de/dienstleistungen
我试着写了一个函数来处理这个问题，但是没有成功
if (!lang.serviceIntro[0][service]) {
console.log('undefined', this)
this.context.router.push('/de/dienstleistungen')
}
失败的上下文类
浏览 0提问于2017-05-25得票数 1
我有以下代码，在{...props}中，一个函数是从父组件传递过来的。在所有路由中，除了那些具有/:id的路由之外，该功能在道具中都可用。
你知道为什么吗？
<Switch>
<Route exact="exact" path="/" render={() => (<ManageClients {...props}/>)}/>
<Route exact="exact" path="/new-client" render={() => (<AddClient {..
浏览 0提问于2018-08-17得票数 0
我使用了React路由器，如下所示：
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={HomeComponent}/>
</Switch>
</BrowserRouter>
当我使用this.props.history.push("/home")或页面是移动到主页，但网址仍然是。路由是有效的，我可以导航到所
浏览 4提问于2021-06-30得票数 0
回答已采纳
4回答
我最初的网站是在中开发的，但现在客户想要将后端和前端分开，就像他希望后端完全像基于api的web服务那样工作一样。
因此，我决定使用Lumen构建一个示例博客Api服务，这个api具有以下特性:登录、注册、Post博客、Post注释
我使用Postman测试了api内部操作，一切都很好。
我对前端框架的概念很陌生，所以决定看一看ReactJS，虽然我很喜欢这个框架，但是现在我无法理解使用webpack + bundle + reactjs如何为我的api-服务创建一个多页的前端网站。
计划是在其他服务器上托管api-service，并在其他服务器上托管前端网站。
我的问题是基于我的目标，我对R
浏览 11提问于2017-08-20得票数 0
1回答
我两次使用一个名为New的组件，一个用于/New，另一个用于/Edit，因为这个页面中的所有input都应该用于编辑页面，所以我决定再次使用这个组件，但设置数据时有一些条件。
路由器
<Route exact path='/New' component={New}></Route>
<Route exact path='/Edit/:id' component={New}></Route>
在两个页面中使用该组件都没有问题，但是如果用户在编辑页面中，并单击navigation，请参阅/New页面中包含属于/Edit
浏览 0提问于2020-01-04得票数 0
回答已采纳
2回答
我已经在互联网上到处寻找React的动态路由。但我找不到任何东西来解释它是如何工作的，以及它在每一个单一意义上与静态路由有何不同。
我很清楚当我们想要使用React-Route在同一页中渲染某些东西时，事情是如何进行的。
我的问题是，当需要呈现整个新页面时，它是如何工作的？因为在这种情况下，该页面内的所有DOM都必须重新呈现。因此，它会是静态路由吗？或者在某些方面仍然是动态的？
我希望我已经说清楚了。谢谢你提前给我答复，我很感谢！
浏览 6提问于2017-09-07得票数 23
回答已采纳
我希望将页面的路由保存在单独的组件中，并在app.js中呈现它们，但它提供了“无路由匹配位置”警告。我正在查看我想要的页面，但是警告总是在那里。
App.js：
<div id="app">
<BrowserRouter>
<Routes>
<HomeRoutes />
</Routes>
</BrowserRouter>
</div>
HomeRoutes.js
<>
<Route path="/" element={<Home /&
浏览 11提问于2022-03-10得票数 0
回答已采纳
2回答
我在ReactJS的路线出了问题。我定义了一些这样的路线：
...Import / Class...
class App extends Component {
render() {
return (
<div>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<
浏览 0提问于2019-03-22得票数 1
回答已采纳
我有一个ReactJS应用程序，它工作得很好，但只有一个例外，整个加载的css在源代码中变成灰色，并且不会应用于页面上的任何元素： ? 我的组件相当简单，只做一件事： import React, { useEffect } from 'react';
import { OAuthHandlerService } from '<removed>';
import {LoadingAnimation} from "components/common";
interface IOAuthPageProps {
urlQ
浏览 7提问于2020-06-24得票数 0
2回答
我试图通过react-router-dom开关块将用户的auth状态传递给组件(我认为我应该考虑实现redux，但这是以后的问题)。
有一个Home视图在用户身份验证后传递所有登录信息，我可以使用react将authState对象视为主组件中的一个支柱：
import React from "react";
import Dashboard from "../Dashboard";
import {Switch, Route} from "react-router-dom";
import NoMatch from "../NoMatch
浏览 1提问于2020-10-05得票数 0
回答已采纳
我已经为我创建的表单组件创建了一些上下文。现在，我已经在我的应用程序的根目录下为该上下文创建了一个提供者。但我想知道这是否是做事情的最好方法。
有许多页面上没有表单。为什么我要在这些页面上提供未成功的代码？或者，这真的不是什么大事吗？
如果不这样做更好，那么我有什么想法可以只在那些使用表单组件的页面上添加提供程序吗？
浏览 0提问于2019-09-13得票数 1
1回答
ReactJs -复杂树路由
、、、、
我有这个Route配置(用react-router构建)
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Index}/>
<Route path="studio" component={Studio}>
<Route path="/studio/detail" component={Calendar} />
浏览 0提问于2015-11-11得票数 0
1回答
我正试着把一个肚脐放在我所有页面的顶部。这是路由器：
App = React.createClass({
render: function() {
<div>
<NavBar />
<Locations hash className="Router">
<Location path="/" handler={MainPage} />
<Location path="/
浏览 2提问于2014-07-05得票数 2
回答已采纳
2回答
在将ReactJS应用程序部署到生产域中的子目录时，我遇到了一些路由问题。
我将构建文件放置在我的网站的www.xyz.com/folder1/appfolder/目录中，并且我在package.json中的主页属性被设置为相同的路径。我还尝试使用manifest.json "start_url"："./dashboard“，我的应用程序文件的路由定义如下
<Route exact path="/" component={DashboardPage} />
期望:当我在localhost上运行时，一切都很好，因为在访问localhost时，默
浏览 2提问于2022-01-10得票数 1
回答已采纳
1回答
我试图从Nodejs提供我的react，但是我得到了一个GET错误，这很奇怪，因为当我运行npm和运行react脚本时，所有的操作都很好，但是一旦我使用了node.js，它就不能工作了。此外，如果我通过键入路径或试图向后导航到路由，则会引发错误。例如，当您第一次导航到主页时，它会将您带到一个登录页面，如果我转到另一个页面，然后再回击，它会抛出一个GET错误，即使它事先有效。
Node.js服务器
const express = require('express');
const cors = require('cors');
const path = requi
浏览 4提问于2021-06-13得票数 1
回答已采纳
我有一个登录页面，用户在其中对我的服务器进行身份验证。如果用户通过了身份验证，那么我设置了两个本地存储密钥-一个用于token，另一个用于authtoken。
用户可以在应用程序的页面之间导航，检查这些值的存在，没有任何问题。
当我注销时，注销按钮调用以下函数：
const handleLogout = () => {
logout();
history.replace("/");
};
logout()函数只清除上面提到的值：
localStorage.removeItem("token");
localStorage.removeIte
浏览 2提问于2022-02-02得票数 0
回答已采纳
我在处理反应元件方面遇到了麻烦。我的问题已经通过堆叠溢出在几个问题中得到了答案，但我无法解决我与他们的问题，这就是为什么我再次发帖的问题。
我的app-client.js文件
var React = require("react");
var ReactDom = require("react-dom");
var Router = require("react-router");
var Route = Router.Route;
var DefaultRoute = require("react-router").Defaul
浏览 3提问于2016-10-28得票数 2
回答已采纳
我可能缺少关于在ReactJS中加载更少文件的基本理解，但我无法解决以下问题。
我为每个组件创建了组件并创建了更少的文件，例如：
import * as React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { NavLink } from 'react-router-dom';
import '../styles/how-it-works-styles.less';
import Ico
浏览 0提问于2018-11-04得票数 3
回答已采纳
在app init中，我动态地从DB加载URL，并使用app.add_url()添加它们。由于行为类似于CMS，我的用户可以删除或更改某些页面的url，因此有时需要删除映射或重新加载所有url映射。
有人知道怎么做吗？
谢谢
浏览 4提问于2014-06-09得票数 5
回答已采纳
1回答
我将Laravel 5与AngularJS一起用于一个项目，这样就可以将Laravel用作API，而API路由在Laravel中，而客户端路由则在AngularJS (app.js)中。
是否可以使用Laravel中间件来保护AngularJS路由，例如，我希望它在角登录表单页面路由上使用RedirectIfAuthenticated中间件，以便人们在登录时不能访问该页面，但据我所知，中间件通常是在Laravel控制器中指定的，该控制器没有角侧路由的逻辑--因此出现了问题。
所以问题是，我是否可以使用中间件，或者我必须发出一个角度发送一个get请求，询问laravel用户是否在每个页面上登录？
浏览 6提问于2015-06-16得票数 1
回答已采纳
我的应用程序必须使用外部OAuth 2.0授权代码流对用户进行身份验证。我使用ReactJS作为这个网站的框架。我的做法如下所示：
首先，在主页中检查访问令牌是否存在。如果不存在，它会将用户重定向到登录组件，在那里它将启动授权代码流。
import React, { useState, useEffect} from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./css/App.css";
import
浏览 11提问于2022-01-07得票数 0
回答已采纳
2回答
我应该使用node.js。我想使用reactjs来呈现我的视图。但也有一些问题。
reactjs内部预定义的函数(如componentDidMount )可以工作吗？
我应该使用redux，有可能吗？
我应该使用哪种路由(react还是express.js路由器)？
浏览 1提问于2019-01-07得票数 0
回答已采纳
我正在尝试设置小型的reactjs应用程序，并且我使用的是路由器。
登录组件-单独的Css文件登录组件-单独的css文件
登陆到登录页面时，css是反射的，但当导航到注销页面而不是注销css登录组件页面时，css是反射的。如何解决这个问题。
注意:导入每个组件中的样式
我们没有像加载组件会像配置那样加载这个css文件这样的选项吗？
Login.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import "../Login/LoginStyle
浏览 0提问于2020-04-27得票数 1
这是我的代码，我是一个全新的前端开发，任何人都可以帮助我解决这个问题，我希望用户被重定向到登录页面，如果用户没有登录，但一旦他登录，一切都应该正常工作，但即使当我点击登录，登录页面显示时，我改变了网址，登录页面出现在每个网址这里是我的代码(我是新的前端，请不要评判)
import { useState } from 'react'
import { Route, Switch} from 'react-router-dom'
import Dashboard from "./pages/Dashboard";
import DatasetGene
浏览 1提问于2021-07-10得票数 2
3回答
我有以下App.js：
function App() {
return (
<div className="App">
<Header></Header>
<HomePage></HomePage>
</div>
);
}
在默认情况下，任何访问该网站的人都应该首先看到主页。
我有一个包含以下路由信息的导航菜单：
<Router>
<Switch>
浏览 9提问于2020-08-06得票数 6
回答已采纳
我有： function ShowNav(props) {
const isLoggedIn = props.isAuthenticated;
if(isLoggedIn) {
return 'Show nav';
} else {
return 'Hide nav';
}
}
render() {
return (
<Router history={history}>
<Switch>
浏览 16提问于2019-02-05得票数 0
回答已采纳
2回答
我一直在学习creation路由器，当我试图实现一个基于获取api调用的片段的动态页面创建时，遇到了一些问题。
基本上，在用户单击链接后，我尝试将用户重定向到一个新页面--这个新页面将是一个新的组件，我将在这个组件上进行一个新的api调用，其中slug作为我的搜索参数。
但是，我很难根据弹格动态地更改页面。
下面是一个组件(BoxScore.js)，在该组件中，我进行了初始的获取和显示数据-
import React from "react";
import { useEffect, useState } from "react";
import { Link
浏览 2提问于2022-03-31得票数 1
回答已采纳
1回答
我想要的效果：
当页面独立加载组件A、B和C时
用户单击组件B内部的链接
组件A、B和C独立动画
一个新的页面加载，更多的组件动画。
这听起来很简单，但我正在努力让它成为现实。到目前为止，我已经使用react-router v4设置了许多路由，我正在使用CSSTransitionGroup向路由和组件添加移动。
我遇到的问题是：
如果一个路由是动画的，我似乎不能动画在组件内的任何被调用的东西。当然，当组件离开时，动画将无法工作。
如果单独的组件是动画的(而不是路由)，那么当路由改变时，任何动画都不会延迟。
任何提示或资源，如何实现这一期望的影响将是伟大的
浏览 3提问于2017-08-03得票数 2
回答已采纳
我正在尝试使用Xamarin forms webview .Navigated事件来检测react应用程序中的页面位置何时发生更改。然而，它似乎只有在我导航到外部页面时才会发出，而不是在react应用程序中，即使我使用的是react路由器。在我的浏览器中，url会发生变化，但Xamarin webview不会注册这种变化，即使我通过打印webView.Source来手动轮询url。
有没有什么方法可以让我在C#的react应用中检测到导航？
浏览 1提问于2017-07-16得票数 3
我是reactjs的新手，并且被困在一个场景中。它有两个页面:公共的和受保护的。用户只有在登录时才能看到受保护的页面。当用户使用凭据登录应用程序时，它会从仪表板导航到其他页面，如用户列表(受保护页面)，如果用户尝试刷新页面，则会返回仪表板页面，而不是停留在当前页面，即用户列表页面。
下面是我的代码的路由页面：
<code>A0</code>
专用路由代码为：
<code>A1</code>
上面的代码将用户从UserList页面返回到仪表板(受保护的页面)页面，而不是加载相同的页面。
谢谢。
浏览 17提问于2020-11-17得票数 0
我正在学习如何将网站部署到heroku。我的web应用程序在服务器端有一个nodejs项目和一个mysql，在客户端有一个reactjs。你能告诉我需要做的步骤吗？因为我是个新手。非常感谢
浏览 0提问于2019-05-05得票数 0
1回答
我有一个奇怪的问题，当刷新一页的反应。
它正在向URL的末尾添加一个/，这将导致在活动服务器上出现目录列表。
localhost:3000/项目刷新时继续显示相同的url
但是什么时候
localhost:3000/blog被刷新，它变成localhost:3000/blog/
有人看到这个了吗？试图找到一个开始寻找解决方案的地方，因为它只发生在这个页面上。
如果需要的话，很乐意在这里贴代码。
这可以在网站上看到，转到博客并刷新。
App.js
var React = require('react');
var ReactRouter
浏览 1提问于2017-05-24得票数 1
回答已采纳
1回答
所以我有一个基本的逻辑页面，用户可以在其中输入他们的凭据。如果他们是合法的，他们会被重定向到一个私人主页。如果没有，他们会被重定向到注册页面。我的身份验证钩子工作得很好，所以当用户输入正确的凭据时，他们会按预期被重定向到主页。问题是，当他们没有注册时，他们不会被重定向到注册页面。我不知道为什么其中一个可以工作，而另一个不行。
以下是登录页面：
import { withRouter, Redirect, Route} from "react-router-dom";
import { useAuth } from "../auth";
const LoginP
浏览 16提问于2021-02-27得票数 1
回答已采纳
1回答
要转到competition page，我在Gatsby中使用这个函数，转到该页面：
gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^\/competition/)) {
page.matchPath = "/competition/*"
createPage(page)
}
}
从competition page我要回Game component
浏览 2提问于2019-08-02得票数 2
我已经成功地将“角”应用程序转换成一个可以在iOS和安卓上运行的离子应用程序。现在，当组件出现/消失时，我正在尝试获取生命周期方法(ionViewDidLoad、电离离开等)。这个应用程序目前没有任何离子页面，我需要添加一个页面来获得这些生命周期方法吗？我已经做了一个星期左右的离子，所以请保持低火。
谢谢
浏览 0提问于2019-03-12得票数 0
回答已采纳
我有几个react路由，如下所示：
<Route exact path='/Home' component={Products}/>
<Route path='/Login' component={Login}/>
<Route path='/Register' component={Register}/>
<Route path='/ProfilePage' component={ProfilePage}/>
我想让profilepage路由只有登录的用户才能访问，但我几乎不知道如
浏览 3提问于2020-12-23得票数 0
2回答
我是ReactJS的新手，我正在尝试创建一个有主页和关于页面的应用程序。我希望能够通过单击导航栏中各自的锚/链接在两个页面之间切换。
在将BrowserRouter和相关元素添加到我的代码之前，一切都很好，但是现在网页上什么也没有呈现。
我使用的react-router-dom版本是react-router-dom@6.2.1。
这是我的index.js文件：
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDO
浏览 3提问于2022-02-02得票数 1
回答已采纳
免责声明:我非常确定这是一个副本，因为没有人会问这个问题，但是我不知道我是不是搜索错了词，但是我找不到答案，所以我在这里问。 我使用的是React routers (react-router-dom)，例如，如果我设置： <Route path='/home' component={Home} /> 在这一点上，很明显，如果我去localhost:3000/home，它会加载我的主页，对吧？但是如果我去localhost:3000/fjnisodjuhfosij (只是随机文本)，它会加载一个空白页面，它不会说“这个页面不存在”或者只是重定向到主页。我该怎么处理呢
浏览 18提问于2021-09-01得票数 0
1回答
我在一个项目中工作，它的主页包含一个登录表单，要求用户插入电子邮件和密码，然后通过-if认证-用户导航到个人资料页面。下面是我在React中实现私有路由的代码部分： import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('use
浏览 7提问于2020-08-27得票数 0
1回答
我正在创建一个简单的应用程序与ReactJS和科尔多瓦。当我运行npm start时，这个应用运行得很好。但是，当我执行npm run build并将build文件夹复制到cordova项目的www文件夹中时，当我在android中运行它时，我得到一个空白屏幕。如果我运行cordova浏览器，路由器不工作，并且它在index.html上着陆。我想我已经将范围缩小到cordova的路由器问题，路由没有将页面设置为主页。其他人有过这样的问题吗？我使用npm create- reactJS -app创建了我的应用程序项目。
文件夹结构
import React, { Component
浏览 2提问于2017-11-17得票数 0
I创建了一个function应用程序并实现了两条路由。页面在'/‘上显示欢迎消息，/pageone显示另一个页面。主页( "/“)中的按钮(”/“)是用链接包装的，它有一个函数onClose = () => {this.setState({visible:false,});}，我希望它在那之后首先运行，然后我只想更改我的路径--点击/
如何做到这一点？是否有任何方法可以编写运行此onClose函数的函数，然后路由到链接？
浏览 2提问于2019-09-18得票数 0
我有一个Django后端工作，也是一个反应SPA。
我将React构建存储在Django的静态文件目录中，网页运行正常。
但我的问题是Django仍然处理路由，例如404页面，当用户重新加载路由页面时，它会将他们带到Django页面。
浏览 0提问于2018-06-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
