我想要实现的目标: 使用 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/