react-router不在服务器端呈现组件
React Router 是一个用于构建单页应用的库，它提供了一种在 React 应用中实现路由功能的方式。React Router 可以帮助开发者在不同的 URL 路径下渲染不同的组件，从而实现页面之间的切换和导航。
React Router 在服务器端不会直接呈现组件，因为它主要是为前端开发而设计的。在服务器端渲染时，通常会使用其他的框架或工具来处理路由和组件的渲染，例如 Next.js 或者 Express.js。
对于服务器端渲染，可以使用 Next.js 框架来实现。Next.js 是一个基于 React 的轻量级框架，它提供了服务器端渲染和静态导出等功能。使用 Next.js，可以在服务器端渲染 React 组件，并将渲染结果发送给客户端。
在 Next.js 中，可以使用内置的路由系统来处理 URL 路径和组件的映射关系。通过定义页面文件，可以指定不同的 URL 路径对应的组件。Next.js 会在服务器端根据请求的 URL 路径来渲染对应的组件，并将渲染结果返回给客户端。
Next.js 还提供了一些其他的功能，例如代码分割、预取数据、静态导出等，可以帮助开发者更好地优化应用的性能和用户体验。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云函数（SCF）。
- 腾讯云云服务器（CVM）：提供了可扩展的虚拟机实例，可以用于搭建服务器环境，支持多种操作系统和应用场景。详情请参考腾讯云云服务器产品介绍。
- 腾讯云函数（SCF）：是一种无服务器计算服务，可以在云端运行代码，无需管理服务器。可以用于处理服务器端的逻辑，包括路由和组件的渲染等。详情请参考腾讯云函数产品介绍。
以上是关于 react-router 不在服务器端呈现组件的解释和推荐的腾讯云相关产品。
相关·内容
4回答
当我点击链接“蛋糕”，我得到的错误，路径不匹配或服务器找不到。
下面是我为3个文件编写的代码-路由器、导航和详细组件
Routers.js-处理路由的组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import
浏览 4提问于2016-08-18得票数 0
回答已采纳
1回答
我遵循了react-router指南中报告的示例
var App = React.createClass({
render: function () {
return <div>Hi</div>;
}
});
var routes = (
<Route handler={App} path="/" />
);
// if using express it might look like this
app.use(function (req, res) {
// pass in `req.url` and the r
浏览 2提问于2015-08-26得票数 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
回答已采纳
在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回答
ReactJS测试的玩笑
、、、
我对我的React组件进行了以下测试
var React = require('react/addons');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;
describe('Navigation', function() {
v
浏览 2提问于2016-06-08得票数 0
回答已采纳
我正在使用react路由器版本4，并试图处理服务器上的路由。
包括和在内的所有教程都在使用React路由器v3。
目前唯一可用的指南是。
我遵循了相同的步骤，但我得到了以下错误：
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));
^
ReferenceError: docum
浏览 6提问于2016-11-22得票数 2
回答已采纳
我需要一个区域的表单被隐藏时，页面加载和显示时，用户点击一个按钮。我尝试了一个动态动作，我使用了"Show“和"Hide”，但它没有按计划工作。该区域在加载页面后显示。
浏览 0提问于2021-10-21得票数 0
我在绘制一个同构应用程序时遇到了问题，当我不使用react路由器(1.0.0-rc3)时，它可以正常工作，但是当我介绍路由器时，特别是一个呈现如下链接的组件：
const React = require('react');
const Link = require('react-router').Link;
module.exports = class About extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
浏览 1提问于2015-11-03得票数 1
回答已采纳
1回答
我遇到了一个问题，如何让react组件具有基于异步获取数据的初始状态。MyComponent从API中获取数据，并通过Mobx action设置其内部data属性。
客户端，调用componentDidMount，然后获取数据，然后设置并正确呈现数据。
import React from 'react';
import { observer } from 'mobx-react';
import { observable, runInAction } from 'mobx';
@observer
export default class MyC
浏览 0提问于2016-12-13得票数 1
回答已采纳
假设我有一个现有的Django webapp，其中有一堆urls.py格式的urls。现在假设我想要向这个Django应用程序添加一些网页，其中的新网页是使用React构建的。
据我所知，React有自己的路由功能(在react-router中)，所以如果我访问mydomain.com/page1/，它将提供一种服务，而如果我访问mydomain.com/page2/，它将提供另一种服务。
但是如果我不想使用react-router呢？换句话说，如果我有10个新页面要添加，每个页面都有自己的网址，那么为什么我不能直接在Django的urls.py文件中设置呢？
目前在urls.py中，我有一个
浏览 0提问于2017-11-07得票数 3
我正在尝试将React-Router实现到现有的react应用程序中。
如何根据某些条件使用react-router来显示组件。
var displayRHS;
if(this.state.displayEventComponent){
{/*
* Events Menus
*/}
displayRHS = <DisplayEventComponent
parentFunc={this.displayComponentFunction}
parentPropDay={th
浏览 6提问于2017-05-31得票数 0
2回答
我正在使用react和react-redux和react-router，并且我试图在我的组件中定义一个静态方法，用于从服务器获取该组件的必要数据。这些操作是异步的，我使用redux-thunk中间件。单独调用操作很好，但我不想手动定义何时需要调用哪些操作，而是只想循环访问服务器上的组件，并在必要时调用静态方法。
我尝试过使用这样的东西来遍历所有的组件，但是我不能让它工作。我怀疑这是因为我的组件是嵌套的。
return Promise.all(
components
.reduce((previous, current) => {
return (c
浏览 2提问于2016-07-17得票数 1
var React = require('react'),
ReactDOM = require('react-dom'),
Router = require('react-router').Router,
Route = require('react-router').Route,
SiteLanding = require('./components/landing/SiteLanding'),
KanbanBoard = require('./component
浏览 2提问于2016-02-12得票数 0
回答已采纳
1回答
我正在做React的一个小项目。我想从ReactJS中的当前URL获取路由名称。
我目前正在使用React-Router 3.2.0，我想在React-router (3.2.0 )中解决这个问题。
浏览 16提问于2019-03-25得票数 0
2回答
我已经在react-router中用<HashRouter>做了一个模态组件，它通过hash url变得活跃和不活跃，也就是说，当url为/route时，modals是不活跃的，而当url为/route#modal1时，modal1是活跃的。在next.js中有什么方法可以定义哈希路由吗？
浏览 1提问于2020-02-03得票数 7
我有一个包含以下代码的高速公路应用程序，我想要做的是呈现一个名为Hello的react组件，请求"/“。在Hello组件中，我使用了两个反应性路由器链接，但这两个链接不呈现href属性。
我在这里使用的是反应性路由器2。
Server.js文件
var express = require("express");
var app = express();
var React = require("react");
var ReactDOM = require("react-dom/server");
var Hello = React.c
浏览 3提问于2016-03-12得票数 3
1回答
新的反应，并遇到困难，试图创建一个持久的导航跨越我的应用程序使用React -路由器。
使用create-react-app和"react-router": "^3.0.2"
我只想在页面的顶部有几个链接。我一直收到的错误是Uncaught Error: <Link>s rendered outside of a router context cannot navigate.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
i
浏览 4提问于2017-02-23得票数 0
回答已采纳
我对使用React/Node/Express相当陌生，我选择了kyt作为样板，因为在寻找要工作的基本文件集时，这似乎是一个很好的选择。我正在使用默认的。
我的工作是从CMS中提取一堆JSON，并将其转化为一个。
为此，我需要能够用这个JSON文件中的数据填充“路由”。我使用了下面发布的代码，这很好用。不过，这里的问题是，我对JSON的“导入”意味着数据被编译到我的包中(由webpack编写)--这很好，直到CMS更新JSON文件，此时bundle.js才会更新，使其过时(除非我编写了一些代码来在每次CMS更新时重新编译这个包，因为我不喜欢它的声音)。
我需要的是代码在运行时加载JSON文件，而
浏览 1提问于2017-02-03得票数 3
2回答
我想要创建一个反应应用程序与客户端和服务器端呈现。
下面是一个例子：
import styles from './Main.css';
import React, {Component} from 'react';
import Info from './Info/Info';
import Record from './Record/Record'
export default class Main extends Component {
render() {
return (
浏览 2提问于2016-09-01得票数 3
回答已采纳
为什么使用react-router在页间更改时react组件中的状态重置？
据我所知，只要您使用“react”的更改方式，您就应该能够使用react-router在路由(组件)之间切换。<Link to="/otherRoute" />。对我来说不是这样，我也不明白为什么。以下是代码：
App.js
import RoutesComp from "./RoutesComp";
import { Link } from "react-router-dom";
function App() {
return (
<d
浏览 0提问于2021-10-16得票数 2
回答已采纳
1回答
如果我想从"react-router": "^2.0.0"升级到"react-router": "^4.0.0","react-router-dom": "^4.0.0"。我的结构应该是这样：
主组件:是每个事物(父组件)的容器组件。
Nav组件:用于在其他子组件之间导航，并且应该始终显示该组件。
子组件:示例，关于，测试。其中测试是默认的。
我的旧代码按预期工作如下：
-App.jsx
var {Route, Router, IndexRoute, hashHistory}
浏览 4提问于2017-04-28得票数 3
回答已采纳
如果没有AJAX请求的响应，我将没有任何东西可以显示给用户，也就是说，我会将所有内容存储在数据库中。我的组件GenericPage.jsx：
export default class GenericPage extends React.Component {
componentWillMount() {
if (this.store && this.onStoreUpdated) this.store.addChangeListener(this.onStoreUpdated);
if (!this.state.page && t
浏览 5提问于2016-03-29得票数 0
回答已采纳
我对前端框架有点困惑。我读到，如果你使用ng-route或react-router，它会使你的应用程序成为单页面应用程序，那么这是否意味着，如果我不使用ng-route/react-router，而是使用express进行服务器渲染，该应用程序还会被视为SPA吗？
浏览 15提问于2017-12-13得票数 0
以下是我试图在react-router中配置的嵌套路由：
<Route path="/" component={App}>
<Route path="student/:studentId" onEnter={checkAuth} component={Student}>
<Route path="edit" onEnter={checkAuth} component={StudentForm} />
</Route>
</Route>
student/:s
浏览 0提问于2016-04-30得票数 1
4回答
我正在使用react-router v6，可以不使用Outlet组件而使用嵌套路由吗？
例如:我有一个用户页面和一个用户组件上的onClick，它应该导航到特定的用户页面，
当前尝试：
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users" element={<Users />} />
<Route path=":id" element={<UserPage/>} /
浏览 7提问于2020-11-18得票数 0
当我阅读react-router ([)此处的链路描述]1)
它是：“React-empty”注释只是React的null呈现的实现细节。但就我们的目的而言，它是有启发性的。Route在技术上总是“呈现”的，即使它的呈现为null。当的路径与当前URL匹配时，它会呈现其子组件(您的组件)。
但我不明白，你能帮我吗？谢谢
浏览 15提问于2019-11-27得票数 0
回答已采纳
3回答
我想知道在同构的system应用程序中输出基于system(服务器端)的日期/时间的良好实践是什么。确实有很多方法(ajax、环境验证等)，但问题在于实现这一目标的真正途径。
例如，：的目标是以页脚输出当前年份的商标。
FYI:我正在使用react-router模块，所以呈现如下所示：ReactDOMServer.renderToString(<RoutingContext {...renderProps} />)
更新：--如果我试图像这样使用Route道具：
match({ routes, location: req.url }, (error, redirectLocatio
浏览 5提问于2016-01-19得票数 0
react-router-dom@6.4.1没有呈现组件。
我已经有一段时间没编码了。我正试图利用react-router，但似乎出了问题。没有发出错误，但是组件不会呈现。react-router的更新太多了，很难跟上。
链接到
这是我的根文件的一个示例。
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from '
浏览 11提问于2022-09-24得票数 2
5回答
react-router如何正确处理通用应用程序中动态内容的404页？
假设我想显示一个用户页面，其路由类似于'/user/:userId'。我会有这样的配置：
<Route path="/">
<Route path="user/:userId" component={UserPage} />
<Route path="*" component={NotFound} status={404} />
</Route>
如果我请求/user/valid-user-id
浏览 6提问于2017-01-20得票数 18
3回答
反应-路由器是一个非常糟糕的开端.看似基本的东西不起作用。使用react-路由器2.0.0我的链接组件将URL更新为/about，但我的页面在此之后不会呈现有关组件.
入口点js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = requi
浏览 0提问于2016-03-05得票数 13
回答已采纳
1回答
要求是在ajax调用之后在表单外部呈现一个组件。我尝试使用以下代码，但文本未呈现。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ads="http://java.sun.com/jsf/composite/components">
<ui:include src="secondfile"/>
<h:panelGroup id="panel1" rendered="#{bean.access}"&g
浏览 0提问于2012-02-01得票数 1
回答已采纳
1回答
我在上有个回购
我有一个显示链接的主页，当你点击链接时，react-router工作。但是组件的文本不会像<div>Login page</div>、<div>Homepage</div>等那样显示出来。
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'
浏览 1提问于2017-05-21得票数 1
回答已采纳
1回答
我似乎无法得到webpack的外部配置来做出正确反应
当react作为从node_modules捆绑的供应商导入时，该应用程序就能工作。但是，当我移除供应商包并尝试使用CDN中的react时，我会得到以下错误。
警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。webpack_require @ app.js:20 (匿名)@ app.js:429 webpack_require @ app.js:20 module.exports @ app.js:66
浏览 5提问于2017-02-05得票数 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
2回答
我最初使用的是来自react-router的react-router，并以编程方式使用this.props.history.push()导航我的React应用程序。但是，随着从HashRouter包开始使用react-router-dom，this.props.history.push()现在抛出一个Cannot read property 'push' of undefined错误。
现在如何使用HashRouter以编程方式导航？
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvid
浏览 2提问于2017-05-26得票数 7
回答已采纳
标题解释了这一切，这里是上下文
我的搭档有一个和react-scripts start一起运行的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory} from 'react-router';
import App from './components/App.jsx';
import SignUp from './components/SignUp.jsx&
浏览 0提问于2017-03-05得票数 0
我确实升级了从反应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
回答已采纳
我正在使用Rails，在资产内部使用Rails和react router.js。我用webpack是为了使用要求
我在app.js里有我的路线：
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
var ReactDOM = require('react-dom');
var browserHistory = require(
浏览 3提问于2016-02-13得票数 0
我希望将react-router配置为在呈现任何路由之前等待Firebase登录(或注销)。
我已经看到react-router有一个onEnter()钩子，但这似乎是一个即时回调，我还没有完全弄清楚如何让react-router等待直到firebase触发firebase.auth().onAuthStateChanged(...)事件。
react-router是否包括一些处理此类情况的功能？
浏览 3提问于2016-07-15得票数 4
回答已采纳
在OracleAPEX22.1(OracleDatabaseEE21c)中，我有一个Modal对话框，它有一个带有多个按钮的按钮容器。将根据对话框变量0或1中的项显示或不显示这些按钮。
当我按下"UnDelete“按钮时，会触发PL/SQL执行类型的动态操作，然后更改数据库中一个字段的值，然后再执行两个Refresh操作。PL/SQL执行类型成功地更改表数据库中字段的值，第一个动态操作刷新Modal对话框上的经典报告区域，显示字段的新正确值。
第二个刷新真操作尝试刷新Modal对话框的Button容器区域，以隐藏按钮"UnDelete“并显示rest按钮，这些按钮都是基于此变量
浏览 7提问于2022-11-10得票数 0
回答已采纳
一切都是关于同构应用的。我在服务器端使用React和react-router模块进行路由，并在浏览器控制台中有以下警告。
警告:呈现(.)：用新的根组件替换React呈现的子元素。如果您打算更新此节点的子节点，则应该让现有的子节点更新其状态并呈现新组件，而不是调用ReactDOM.render。
我在后端上定义了以下路由模式
<Route path="/" component={App} >
<IndexRoute component={Home} />
</Route>
App组件：
module.exports = Rea
浏览 2提问于2016-01-13得票数 0
本文档不足以理解如何使用react-router 2在服务器端呈现具有不同类型的http请求的react组件，如get、post、put等。
浏览 1提问于2016-03-13得票数 2
<Route path="/:user" component={Home}>
<Route path="/:thing(/:version)" component={Thing}/>
</Route>
因此，我的应用程序中有两个动态对象，我希望通过react-router中的路由参数来控制它们。使用上面的代码，/0和/0/3都会把我带到Home。我需要/0/3带我去找Thing。我不确定我到底做错了什么。react-router是否支持像这样相邻的多个动态参数？我在文件里找不到任何东西。
浏览 3提问于2016-08-11得票数 1
回答已采纳
我是React Router的新手，我想实现以下内容：
// if the user is connected
<div>
<header/>
<sidebar/>
<content/>
<footer/>
</div>
// else
<login/>
我正在使用React-Router v4。我该怎么做呢？
浏览 2提问于2018-02-04得票数 0
我创建了<RequireAuthRoute>，它要么返回其子级，要么导航到/login。然而，它的使用方式并没有让我满意。看一看这个片段：
<Route
path=''
element={
<RequireAuthRoute>
<Explorer />
</RequireAuthRoute>
}
/>
所以，是的--从技术上讲，它可以工作，但是我想要做的是为<Route>组件创建包装器，这样它最终会看起来如下所示：
<ProtectedRoute path=&#
浏览 1提问于2022-03-22得票数 1
回答已采纳
我正在尝试使用react-router-dom和打字本。
我安装了@types/react-router-dom。
但我在呈现的组件中很难找到routeProps：history、match和location。
我是说，我知道他们在场，但打字本不知道。
我就是这样呈现这条路线的：
我看到了和，您应该安装@types/react-router。这是正确的吗？这可能是我在路由渲染组件中看不到routeProps的原因吗？
更新：
我已经安装了@types/react-router，但仍然无法从呈现的组件中访问这些道具。
浏览 4提问于2020-08-28得票数 0
在当前的设置中，我正在构建多页通用web应用程序(使用react-router在服务器和客户端上进行路由)。这个项目不使用任何(redux)存储(我认为现在没有必要)。
负责从远程API获取数据的组件之一，在componentWillMount方法中完成。
在服务器端渲染时，组件将读取数据，进行渲染，并将渲染后的HTML发送到客户端。
当客户端使用ReactJS挂载HTML时，它会再次从componentWillMount方法中获取数据。这是导致不必要双重数据获取的原因。
它有什么解决方案吗？
浏览 19提问于2016-08-12得票数 2
1回答
我正在使用下面显示的应用程序文件和主要组件的，但是我得到了错误消息"Invalid prop component supplied to IndexRoute. in IndexRoute“和Uncaught TypeError: Cannot read property 'props' of undefined。
//app file
import React from 'react';
import { render } from 'react-dom';
// Import Components
import Main f
浏览 4提问于2016-08-23得票数 0
1回答
我有一个包含3个锚的导航栏，当我点击每个页面时，我想在不同的页面之间导航。我使用了react-router (版本6.3.0)来实现这一点，但是我遇到了两个问题，我得到了一个堆栈。
第一个是当我单击LaunchApp锚点时，URL更改为http://localhost:3000/launchApp页面显示其内容，但显示在主页的顶部，而不是在新页面上。第二个问题是，当我刷新页面时，页面不会返回到主页(http://localhost:3000)，而是呈现我单击的最后一个锚点。
App.js
return (
<s.Main>
<>
<Na
浏览 2提问于2022-05-13得票数 1
回答已采纳
在我的React应用程序的根组件中，我有以下内容：
class App extends Component {
...
ComponentDidMount() {
window.addEventListener('resize', this.handleResize, false);
}
handleResize{
this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
this.forceUpdate();
}
ren
浏览 4提问于2017-08-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
