Locally I can browse to /buttons just fine I can even refresh it and its fine too, but when I upload the build directory to github pages I can't access /buttons and instead I get the GitHub 404 page, not my own 'notfound' page.
If I make a link from the home page to /buttons, then buttons will load, but browsing there directly it does not load.
import React, { useState } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Context } from "./components/context";
import { Layout } from "./components/layout";
import { Home } from './routes/home';
import { Buttons } from './routes/buttons';
import { NotFound } from './routes/notfound';
const Router: React.FC = () => {
const [global, setGlobal] = useState({
language: localStorage.getItem("language") || 'en',
apiUrl: 'https://api.domain.com/api',
loggedIn: localStorage.getItem("jwt") ? true : false,
redirectUrl: '',
modal: false,
modalState: '',
});
return (
<Context.Provider value={{ global, setGlobal }}>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Route render = {({ location }) => (
<Layout location = { location }>
<Switch location = { location }>
<Route exact path = '/' component = { Home } />
<Route exact path = '/buttons/' component = { Buttons } />
<Route component = { NotFound }/>
</Switch>
</Layout>
)} />
</BrowserRouter>
</Context.Provider>
);
}
export { Router };
In package.json I do have the homepage defined as:
"homepage": "https://myName.github.io/myRepo",
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…