在为React-Router提供静态文件时,使用Express JS将数据发送到路由

我想要实现的:使用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> ); }; 

路由器/ 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”的获取path,这将不起作用,因为有一个获取静态文件的获取path 但是如果我把这条路线放在路线上面,我只能得到'/ home'res …我想要find的是通过添加路线来添加数据的方法…您可以将它看作是一条路线获取所有的默认值,但也可以覆盖或获得额外的值…

有没有可能从https://tmi.twitch.tv/group/user/instak/chatters获取数据,并获取我的React组件中的数据?

在此先感谢帮助我,我已经尝试了很多,以获得这项工作已经…

Solutions Collecting From Web of "在为React-Router提供静态文件时,使用Express JS将数据发送到路由"

我会声明这样的路线:

 // 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> ); 

相关问题: https : //github.com/mrpatiwi/routed-react/issues/1