jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Reworking routes

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-02 23:04:13 -08:00
parent 623cd50862
commit e330795a7b
3 changed files with 56 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/index.html
View File

@ -1,35 +1,43 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta <meta
name="viewport" name="description"
content="minimum-scale=1, initial-scale=1, width=device-width" content="Web site created using create-react-app"
/> />
<base href="%PUBLIC_URL%/"> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="icon" href="./assets/favicon-32.png" sizes="32x32"> <!--
<link rel="icon" href="./assets/favicon-57.png" sizes="57x57"> manifest.json provides metadata used when your web app is installed on a
<link rel="icon" href="./assets/favicon-76.png" sizes="76x76"> user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
<link rel="icon" href="./assets/favicon-96.png" sizes="96x96"> -->
<link rel="icon" href="./assets/favicon-128.png" sizes="128x128"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="icon" href="./assets/favicon-192.png" sizes="192x192"> <!--
<link rel="icon" href="./assets/favicon-228.png" sizes="228x228"> Notice the use of %PUBLIC_URL% in the tags above.
<style> It will be replaced with the URL of the `public` folder during the build.
body { Only files inside the `public` folder can be referenced from the HTML.
background-image: linear-gradient(#090B1A, #131524);
margin: 0; Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
padding: 0; work correctly both with client-side routing and a non-root public URL.
overflow-x: hidden; Learn how to configure a non-root public URL by running `npm run build`.
} -->
</style> <title>React App</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Oswald&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<noscript> <!--
This site requires JavaScript to run. This HTML file is a template.
</noscript> If you open it directly in the browser, you will see an empty page.
<script src="./dist/bundle.js"></script>
<script> You can add webfonts, meta tags, or analytics to this file.
</script> The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

14
src/App.js
View File

@ -6,10 +6,10 @@ import 'core-js/features/number/is-nan';
/* App starts here */ /* App starts here */
import React from "react"; import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import { Router, Route } from "react-router-dom";
//import 'typeface-roboto'; //import 'typeface-roboto';
@ -22,6 +22,7 @@ function App() {
if (base) { if (base) {
base = new URL(base).pathname; base = new URL(base).pathname;
} }
console.log(`Base: ${base}`); console.log(`Base: ${base}`);
return ( return (
<React.Fragment> <React.Fragment>
@ -30,10 +31,13 @@ function App() {
<Button color="inherit">Login</Button> <Button color="inherit">Login</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Router history={history}> <BrowserRouter basename="/ketr.ketran">
<Route exact path={base + 'games/:id?'} component={Board}/> <Routes history={history}>
<Route exact path={base} component={Board}/>
</Router> <Route exact component={Board} path={base + 'games/:id?'}/>
<Route exact component={Board} path={base}/>
</Routes>
</BrowserRouter>
</React.Fragment> </React.Fragment>
); );
} }

13
src/history.js
View File

@ -1,17 +1,14 @@
import { createBrowserHistory } from 'history'; import { createBrowserHistory } from 'history';
/*
// Run our app under the /base URL. // Run our app under the /base URL.
const history = createBrowserHistory(), const history = createBrowserHistory({
basename: process.env.PUBLIC_URL
}),
push = history.push; push = history.push;
history.push = (path) => { history.push = (path) => {
const base = new URL(document.querySelector("base") ? document.querySelector("base").href : ""); const base = new URL(document.querySelector("base") ? document.querySelector("base").href : "");
push(base.pathname + path); push(base.pathname + path);
}; };
*/
export default createBrowserHistory({ export default history;
basename: process.env.PUBLIC_URL
});
//export default history;