Kev*_*vin 3 node.js express reactjs react-router
我想要实现的目标：使用 Express JS 制作的可以获取数据的路由（例如来自：https : //tmi.twitch.tv/group/user/instak/chatters），通过 React Router 将其发送到我正确的路由并让 React 等待数据被获取，这样我就可以使用该数据与客户端一起工作。
我试过的
服务器.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}!`);
});
脚本.js
import ReactDOM from 'react-dom';
import React from 'react';
import Router from './routers/';
const init = () => {
ReactDOM.render(
<Router/>,
document.querySelector('.react-app')
);
};
init();
索引.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>
应用程序.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>
);
概览.jsx
import React from 'react';
export default () => {
return (
<div>
<h2>Elaba</h2>
<div>I am the overview page</div>
</div>
);
};
用户.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” res...我想要找到的是一种通过添加路线来添加数据的方法...您可以将其视为一条路线获取所有默认值，但也可以覆盖或获取其他值...
有没有可能我可以从https://tmi.twitch.tv/group/user/instak/chatters获取数据并在我的 React 组件中获取数据以供使用？
在此先感谢您对我的帮助，我已经尝试了很多才能使其正常工作......
小智 5
我会声明如下路线：
// 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