How to fix the routing so that the application works on github pages?

Question

React

https://anrikotacatti.github.io/FD3-Pauls/keep/public/ here it gives out 404 and urls when switching between categories add up
did like this also doesn't work
like this url doesn't work either

<code><base href="./">
<script defer="defer" src="/bundle.js">
</script><link href="/main.css" rel="stylesheet"><style type="text/css"></code>

<code>     new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'), //your template file
            base: "./",
            filename: 'index.html',
        })</code>

this is how the
dev build fails to work
Failed to load resource: the server responded with a status of 404 (Not Found)
moi-noteki:1 Refused to apply style from ' 192.168.43.251:8081/chapter/main.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
moi-noteki:1 Unchecked runtime.lastError: The message port closed before a response was received.
moi-noteki:1 Unchecked runtime.lastError: The message port closed before a response was received.
moi-noteki:1 Error in event handler: Error: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at findStyleSheets ( chrome-extension://diebikgmpmeppiilkaijjbdgciafajm...)
at chrome-extension://diebikgmpmeppiilkaijjbdgciafajm...
moi-noteki:1 Refused to apply style from ' 192.168.43.251:8081/chapter/main.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'), //your template file
            publicPath:"./",
            filename: 'index.html',
        })

I also tried filename: "./bundle.js", , but it adds like this<script defer="defer" src="/./bundle.js"></script>

output: {
        path: path.resolve(__dirname, './public/'),
        filename: "./bundle.js",
        publicPath: "/"

    },

here is the project https://github.com/AnrikoTacatti/FD3-Pauls/tree/ma...

and another problem found webpack puts styles and scripts without a dot like this

<script defer="defer" src="/bundle.js"></script>
<link href="/main.css" rel="stylesheet">

so that it would add styles did this publicPath: "./" added a dot

and like this add url when clicking on a category

https://anrikotacatti.github.io/FD3-Pauls/keep/public/chapter/chapter/chapter/chapter/chapter/chapter/chapter/chapter/chapter/chapter/moi-zametki

forTaskLists = () => {
        let menulist = [];

        for (let tasklistskey in this.state.TaskLists) {
            menulist.push(
                <li key={tasklistskey}>
                    <NavLink to={"./chapter/" + this.state.TaskLists[tasklistskey].url} exact className="PageLink" activeClassName="ActivePageLink" key={tasklistskey}>
                        {this.folder()}  {this.state.TaskLists[tasklistskey].name}
                    </NavLink>
                    <span onClick={this.openFormEditTaskCaption.bind(null, tasklistskey, this.state.TaskLists[tasklistskey].name)}>{this.icoEdit()}</span>
                    <span onClick={this.deleteChapter.bind(null, tasklistskey)}>{this.icoTrash()}</span>
                </li>
            )

        }

        return menulist;
    }

<Switch>
                <Route path="./" exact component={Main} />
                <Route path="./about" exact component={AboutPage} />
                <Route path="./serch" exact component={Search} />
                <Route path="./pin" exact component={Pin} />
                <Route path="./chapter" exact component={TaskChapter} />
                <Route path="./chapter/:chapter" component={TaskChapter} />
                <Route path="*" component={NoMatch} />
            </Switch>

Answer 1

did so, but solved only part of the problem
output: {
path: path.resolve(__dirname, './public/'),
filename: "./bundle.js",
publicPath: 'auto'
},