What’s happening: Whey I type a deep URL into a browser without navigating to it first from the main page, the page won’t render because it dosn’t have the data.
In my server I see that there is a fetch sent to my API with a status code of 304, but if I do it in an incognito window, I do get this error that others have received:
Cannot GET /topics/glascow-coma-score
I’ve read this article, but it didn’t help, or I’m not doing it correctly.
For example, if you go here:
https://emquick.herokuapp.com/topics/glascow-coma-score
In the console you’ll first see an error due to the state (resources) not being loaded. Then in a half second, the resources are populated in the console but there is no rerender.
I’m using browser history, and I’m sending all uncaught calls on the server side to my index.html page, which is supposed to load the index page first, and then react will route, and it should have the state loaded.
I’m not sure if this is a component lifecycle error, if I have an error in my server file, or if I need to eject my create react app and do something with the web-pack server.
I really don’t know, Im just sifting through various things I’ve read online.
Im not even sure that I’m on the right path, but I know the problem can be solved, b/c that’s one of teh things react-router is supposed to allow you to do, link to deep pages, and with some magic, do some SEO as well.
Here’s the relevant server code:
//ROUTES
app.use('/api/resources/', resourceRoutes)
//seedDB()
app.get("/api", function (req,res){
res.json({api: "This is your api"})
})
app.get("/api/resources/*", function (req,res){
console.log("Index page sent")
res.sendFile(path.resolve(__dirname, 'build', 'index.html'), function(err) {
if(err) {
res.status(500).send(err)
}
})
})
And the resources routes:
const express= require('express'),
router = express.Router(),
Resource = require('../models/resource')
router.get('/', function(req,res){
Resource.find({}, function (err, resources){
if (err) console.log(err)
res.json({resources})
})
})
router.get('/:id', function(req,res){
console.log("Im here in the backend API getting " + req.params.id)
Resource.findById( req.params.id, function (err, resource) {
if (err) console.log(err)
// console.log(resource.name)
res.json({resource})
})
})
router.post('/', function(req,res){
console.log(req.body.resource)
Resource.create(req.body.resource)
.then(function(newResource) {
res.status(201).json(newResource)
})
.catch(function(err){
res.send(err)
})
})
And my repo