个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我想要实现的目标: 使用 Express JS 制作的路由可以获取数据(例如来自:https://tmi.twitch.tv/group/user/instak/chatters)，通过 React Router 将其发送到我正确的路由并使 React等待数据获取，以便我可以使用该数据处理客户端。
我尝试过的
server.js
'use strict';
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.resolve(__dirname, '..', 'instakbot-client')));
// Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'instakbot-client', 'index.html'));
});
app.get('/home', (req, res) => {
res.send("I'm just testing to see if this works");
});
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
});
script.js
import ReactDOM from 'react-dom';
import React from 'react';
import Router from './routers/';
const init = () => {
ReactDOM.render(
<Router/>,
document.querySelector('.react-app')
);
};
init();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frafbot</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<base href="/" />
</head>
<body>
<div class="react-app">
</div>
<script src="js/script.js"></script>
</body>
</html>
app.jsx
import React from 'react';
export default ({children}) => {
return (
<div className='container'>
<main>
{children}
</main>
</div>
);
};
routers/index.js
import React from 'react';
import {Router, Route, IndexRedirect, useRouterHistory} from 'react-router';
import {createHistory} from 'history';
import {App, Overview, Users} from '../pages';
export default () => (
<Router history={useRouterHistory(createHistory)({basename: ''})}>
<Route path="/" component={App}>
<IndexRedirect to="home"/>
<Route path="home" component={Overview} />
<Route path="users" component={Users} />
</Route>
</Router>
);
overview.jsx
import React from 'react';
export default () => {
return (
<div>
<h2>Elaba</h2>
<div>I am the overview page</div>
</div>
);
};
users.jsx
import React, {Component} from 'react';
export default class Users extends Component{
constructor(props, context){
super(props, context);
}
render(){
return (
<div>
<p>I am the Users component</p>
</div>
);
}
}
结论: 正如您在 server.js 中看到的，我有一个“/home”的获取路由，它不会工作，因为有一个“”的获取路由可以获取静态文件。但是如果我把那条路线放在 '' 路线之上，我只会得到 '/home' 资源......我想找到的是一种通过添加路线来添加数据的方法......你可以看到它作为获取所有默认值但也可以被覆盖或获取其他值的路由...
有没有可能我可以从https://tmi.twitch.tv/group/user/instak/chatters中获取数据？并在我的 React 组件中获取要使用的数据？
在此先感谢您的帮助，我已经尝试了很多来使它正常工作...
最佳答案
我会这样声明路由:
// Declare API routes before '*'
// Note this route has 'api' prefix
app.get('/api/home', (req, res) => {
res.json({ message: "I'm just testing to see if this works" });
});
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'instakbot-client', 'index.html'));
});
然后在 React 客户端应用程序上:
class Home extends React.Component {
state = { message: null }
componentDidMount() {
fetch('/api/home') // fetch from Express.js server
.then(response => response.json())
.then(result => this.setState({ message: result.message }));
}
render() {
const { message } = this.state;
// ...
}
}
export default () => (
<Router history={useRouterHistory(createHistory)({basename: ''})}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="home" component={Overview} />
<Route path="users" component={Users} />
</Route>
</Router>
);
关于node.js - 当您为 React-Router 提供静态文件时，使用 Express JS 将数据发送到路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39688045/
25
4
0
我开发了一个具有基本安全性的 Spring Boot 应用程序。我有两个具有相同路径和不同 http 方法的端点。当我使用默认密码/使用 application.yml 中给出的密码包含基本安全性时，
我的代码是这样的: 或者，像这样: 如果我首先列出 webm 源，Firefox 4 会播放它，但 Firefox 3.6 也会尝试播放它(但会失败，因为它不支持 webm)。
我希望提供一个泛型类型作为类型参数而不首先将其解析为具体类型。换句话说，我正在寻找一种方法来指定从基类继承时可以使用的类型映射函数。 示例(不正确的)语法，希望比我能解释得更好: abstract c
我在 .NET 中编写了一些桌面应用程序，它们既提供了用于正常使用的前端 GUI，也提供了用于其他需求(例如扩展、调度、自动化、高级使用等)的命令行界面。命名两个可执行文件的最佳做法是什么，因为它们构
我最近在这里思考了很多关于屏幕抓取以及它可能是一项什么样的任务。所以我提出以下问题。 作为网站开发人员，您是否会公开简单的 API 以防止用户抓取屏幕，例如 JSON 结果？ 然后这些结果可以实现缓存
我正在为一个项目使用 Dojo 1.9，但我不明白 dojo.provide 的正确替代方案与传统风格相比，AMD 风格。我正在阅读 this文档页面。 很明显，这就是旧语法映射到新语法的方式: 旧
我正在开发一个 Angular 应用程序。当我使用 ng serve 正常运行它时，它运行没有任何错误.但是，当我运行 ng build --prod ，它给出了以下错误。 ERROR in Ille
我有一个 Mac 应用程序。在我的 Mac 应用程序中，我的屏幕之一有一个包含文本字段的 scrollView。在同一屏幕上，我有一个需要提供打印选项的按钮。可以打印文本字段的文本。打印按钮应调用 M
我已经成功地为普通媒体文件提供媒体文件，但是当我尝试提供管理媒体文件时，我失败了。请帮我找出问题所在，因为我已经尝试解决问题几个小时但没有运气(也一直在谷歌搜索并阅读有关提供静态文件的 django
我正在尝试创建一个简单的错误处理项目，它会在收到错误(例如 404、422 或 500)后为 JSON 提供错误数据。我使用来自 this 的代码网站，但它不适合我。 我实际上有这两个类: 基本 Co
假设我有一个名为 Number 的类(class)，我打算对 Number 进行大量相等比较对象。我担心通用 Number::equals(Object o) 的“开销”(类比较等...)方法。在这种
假定以下情况: 对等方A只希望将音频流发送给对等方B 对等B只希望将视频流发送给对等A 从而， 与创建报价 var sdpConstraints = { “必填”:{ 'OfferToReceiveA
因为我有一些角度，所以我想检查角度模数 360°: double angle = 0; double expectedAngle = 360; angle.Should().B
这是我的程序中构建的 monad 堆栈: type Px a = ReaderT PConf (State PState) a 其中 PConf 和 PState 是保存应用程序的配置和状态的任意数据
因为我有一些角度，所以我想检查角度模数 360°: double angle = 0; double expectedAngle = 360; angle.Should().B
我有一个小程序需要以某些权限运行，这意味着加载时会显示一条警告消息。如果用户拒绝警告消息，我想重定向到错误页面并解释发生了什么。有什么办法可以做到这一点吗？ 我研究过让计时器运行并在特定时间段后重定向
从我可以从 Firebase 文档中推断出，似乎需要服务器来提供静态内容(html和 javascript)，所以你需要有一台托管机器和一个静态内容服务器在某处启动并运行，或某些服务托管静态站点。 对
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 3 年前。 Improv
我的项目根目录的静态文件夹中有一个文本文件。 我想提供它，所以我创建了: @csrf_exempt def display_text(request): content = retur
我目前正在研究指针，为了进一步理解我正在尝试使用指针将两个数值数组连接成一个。代码如下所示。 #include void concat(int **pa,int **pb,int **pc) {
我是一名优秀的程序员,十分优秀！