У меня проблема с динамической маршрутизацией с помощью express.js в моем приложении реакции. Все работает на localhost, но при развертывании я получаю 400. Вот ссылка: https://shoppyshop.herokuapp.com/item/1
Как вы видите в консоли, есть ошибка 400. Моя цель - правильно извлечь данные из того маршрута, который я настроил в моем index.js экспресса.
app.get('/api/item/:id', function (req, res) {
let find = data.filter((el => {
return el.product.id == req.params.id
}))
res.json(find)
console.log('found item')
})
Я понимаю, что есть проблема с экспрессом. Я, вероятно, использую неправильный метод, поэтому он хочет получить значок и остальные файлы с неправильного пути. Погуглил, не смог найти подобную проблему. Как это исправить? Вот компонент, который выбирает данные:
export default class ItemInfo extends Component {
constructor(props) {
super(props)
this.state = {
data: []
}
}
componentDidMount = () => {
axios.get(`/api/item/${this.props.match.params.id}`)
.then(res => {
const data = res.data;
this.setState({
data,
fetched: true
})
})
}
render() {
console.log(this.props.match.params.id)
return (
<div className="App">
<SideBar pageWrapId={"mainpage"} outerContainerId={"MainPage"} />
<div id="mainpage">
<TopBar />
<More data={this.state.data} fetched={this.state.fetched}/>
<Footer />
</div>
</div>
)
}
}
Вот ветка с кодом, над которым я работаю: https://github.com/KamilStaszewski/shoppy/tree/itemrouting/client
Мой файл express.js:
const express = require('express');
const path = require('path');
const data = require('./apiData');
const app = express();
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));
app.disable('etag');
app.get('/category/:category', function (req, res) {
let find = data.filter((el => {
return el.product.category == req.params.category
}));
res.json(find);
console.log('found category');
});
app.get('/api/item/:id', function (req, res) {
let find = data.filter((el => {
return el.product.id == req.params.id
}))
res.json(find)
console.log('found item')
})
// An api endpoint that returns a short list of items
app.get('/api/data', (req, res) => {
var questions = data
res.json(questions);
console.log('Sent list of items');
});
// Handles any requests that don't match the ones above
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/public/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port);
console.log('App is listening on port ' + port);
UPDATE:
После многих коммитов и попыток я нашел ответ. Я не знаю, правильно ли это, но это работает. Проблема была с:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/public/index.html'));
});
Вместо того, чтобы обслуживать индекс из сборки, я обслуживал индекс из публики, в которой не было js. Чтобы все заработало, я изменил на:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/build/index.html'));
});
Теперь это работает.