在为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组件中的数据？
在此先感谢帮助我，我已经尝试了很多，以获得这项工作已经…
我会声明这样的路线：
// 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