As you everybody know, BrowserRouter from react-router doesn't work if you type URL directly in the URL bar. And I found solution here: React router doesn't work on express server here says I should handle Get request using
app.get()
But that doesn't work for me. My react has port number 8081 and express has port 8000. URL of my react-router component is http://localhost:8081/chat/room React-router works fine, shows component when I click Link, but navigating to the component using URL throws Cannot GET chat/room error. Status is 404.
As the answer tells, I added code which should handle GET request:
app.js in express.js
//main javascript file for nodejs. server
const express = require('express');
const session = require('express-session');
const app = express();
const port = 8000;
const cors =require('cors');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const chatRouter = require('./router/chatRouter.js');
const authRouter = require('./router/authRouter.js');
const redis = require ('./redis/redis');
const { RedisClient } = require('redis');
const redisStore= require('connect-redis')(session);
//cors setting
app.use(cors({
origin:'http://localhost:8081',
credentials:true
}));
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(cookieParser());
//redis
const createdClientRedis = redis.createRedisClient();
app.use(
session({
resave:false,
saveUninitialized:false,
secret:"secret key",
cookie:{
httpOnly:true,
secure:false
},
store:new RedisClient({createdClientRedis})
})
);
//Routers
app.use('/chat',chatRouter);
app.use('/auth',authRouter);
app.listen(port, () => {
console.log(`Example app listening on port ${port}!`)
});
chatRouter
const express = require('express');
const path = require('path');
const router = express.Router();
const chatDatabase = require('../chat/db/chatDB.js');
router.use(express.json());
const indexFile = path.resolve(__dirname,"../../../client/src/app.html");
console.log(indexFile);
router.get('*',(req,res)=>{
console.log("this is router get");
res.sendFile(indexFile);
});
I thought when I visit localhost:8081/chat/room, browser should send a GET request to the express server. And because I send all /chat to chatRouter, I thought chatRouter will handle GET request.
But! router.get in chatRouter does nothing. Just nothing.
this is router get is not displayed on console. My guess is browser is not sending GET request to the server because react and expressjs have different port numbers.
I found router.get works if I change browser URL's port number to express fort number (localhost:8081... -> localhost:8000/chat/room)
this is my webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundlefile.js'
},
performance:{
maxAssetSize:500000
},
module: {
rules : [
{
test: /\.js$/,
use: [ 'babel-loader'],
exclude: /node_modules/,
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/app.html'
})
],
devServer:{
port:8081
}
}
**what I tried ** I tried to add two lines in webpack.config.js
historyApiFallback:true //in devServer
outputPath:"/" // in output
but did not work. How should I do to receive Get request in express.js when I visit localhost:8081/chat/room ?
