Refresh child route react-router-dom v6

Currently I tried out react-router-dom v6 and encountered issues with my child route I can go to child route when click the button from its parent. But if I tried to refresh that child route page or enter the child route link myself, page cannot load.

    <!DOCTYPE html>
<html>
    <head>
        <title> Budget App </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel='stylesheet' type="text/css" href='/dist/styles.css'>
    </head>
    <body>
        <div id="budget-app"></div>
        <div id="test"></div>
        <script src="/dist/bundle.js"></script>
    </body>
</html>

Error from console: Refused to apply style from 'http://localhost:4000/home/dist/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

import React from 'react';
import { Outlet, Link ,Routes,Route} from 'react-router-dom'
import LogIn from './LogIn'
import SignUp from './SignUp'

const Home = () => (
    <div className="container">
        <Link to='login' className='nav-link'>Log in</Link>
        <Link to='/home/signup' className='nav-link'>Register</Link>

        <Routes>
            <Route path='login' element={<LogIn />}></Route>
            <Route path='signup' element={<SignUp />}></Route>
        </Routes>
    </div>
)
export default Home

Thanks for your concern

Refresh child route react-router-dom v6

0 Answers