1

I have no issue navigating to the main routes and their nested routes but issue arises within the nested routes example /register, when I try to refresh the page, the page comes up blank with no error on the console. The main routes refresh just fine. I'm currently using endpoints in express to serve the html file for the nested routes so I can keep building the nested routes, but I need a lasting solution to this issue. I'm guessing its an issue with my routing or I've probably done something wrong in the backend. Please help

app.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import {PublicPage} from './public.jsx'
import {Root} from './root.jsx'
import {Register} from './register.jsx'


let contentNode= document.getElementById('container')

function RoutedApp(){
    return(
            <Router>
                <Routes>
                    <Route path={'/*'} element={<PublicPage/>}>
                        <Route index element={<Root/>}/>
                        <Route path='register' element={<Register/>}/>
                    </Route>
                </Routes>
            </Router>
        )
}

ReactDom.render(<RoutedApp/>, contentNode)

webpack

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, './static/js'),
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                vendor: false,
                vendor: {
                    name: 'vendor',
                    chunks: 'all',
                    test: /node.modules/
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env']
                    }
                }

            }
        ]
    }
}

I've tried adding a "homepage":"/" in package.json <base href="/"> in index.html, adding the basename prop to <Router>

I'm building with webpack without the proxy, incase this info is somehow relevant, I'm also serving the file with node/express server

For those interested in the work-around I mentioned earlier, i simply created multiple endpoints for each of react nested routes on the express server, example for the nested /register route,

server.js

app.get('/register', (req,res)=>{
    //send html file
    // res.sendFile(path.resolve(__dirname, '...'))
})
app.get('/api/register', (req,res)=>{
    //send a json data
})
app.post('/api/register', (req,res)=>{
    //receive and process client's input
})
kierankdot
  • 33
  • 4
  • Are you saying that `"/"` (*``*) loads without issue and that `"/register"` (*``*) fails to load when reloading the page on that route? Where and how are you running & serving the application? Can you [edit] to clarify? – Drew Reese Mar 16 '23 at 18:00
  • Yes exactly, I'm experiencing issues when refreshing pages within the nested routes, it shows only the API coming from the express server but the html is not rendered for the nested route – kierankdot Mar 16 '23 at 18:09
  • I think your route is not pointing to correct path. can you check this https://stackoverflow.com/questions/69436603/routing-not-working-in-a-webpack-react-project – Ashiq Mar 17 '23 at 09:33
  • I'm getting the main routes and nested routes. After loading the nested routes come up but when i refresh the page, it shows a blank page. This doesn't happen with the main routes so I'm wondering why it keeps happening to the nested routes – kierankdot Mar 17 '23 at 11:22

0 Answers0