Как поправить роутинг чтобы приложение заработало на гитхабстраницах?

Question

anriko @anriko

Как поправить роутинг чтобы приложение заработало на гитхабстраницах?

https://anrikotacatti.github.io/FD3-Pauls/keep/public/ вот тут выдает 404 и урлы при переключении между категориями складываться
делал вот так тоже не работает
вот так url не работает тоже

<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>

вот так
не работает dev сборка
Failed to load resource: the server responded with a status of 404 (Not Found)
moi-zametki: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-zametki:1 Unchecked runtime.lastError: The message port closed before a response was received.
moi-zametki:1 Unchecked runtime.lastError: The message port closed before a response was received.
moi-zametki: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-zametki: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',
        })

пробовал и так filename: "./bundle.js", ,но добавляет вот так <script defer="defer" src="/./bundle.js"></script>

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

    },

вот проект https://github.com/AnrikoTacatti/FD3-Pauls/tree/ma...

и еще проблему нашел вебпак кладет вот так стили и скрипты без точки

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

чтобы это попавит стили сделал так publicPath: "./" добавил точку

и вот так прибавлються url при клике на категории

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>