Skip to content

Commit 599a82b

Browse files
igbominadeveloperigbominadeveloper
committed
routing setup
- install react-router-dom - setup basic routes
1 parent a438ec0 commit 599a82b

12 files changed

+1442
-37
lines changed

‎netlify.toml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[[redirects]]
2+
from = "/*"
3+
to = "/index.html"
4+
status = 200

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010
"@types/node": "^12.0.0",
1111
"@types/react": "^17.0.0",
1212
"@types/react-dom": "^17.0.0",
13+
"@types/react-router-dom": "^5.1.7",
1314
"react": "^17.0.1",
1415
"react-dom": "^17.0.1",
16+
"react-router-dom": "^5.2.0",
1517
"react-scripts": "4.0.3",
1618
"typescript": "^4.1.2",
1719
"web-vitals": "^1.0.1"

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Gbedu Manager</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"short_name": "React App",
2+
"short_name": "Gbedu Manager",
33
"name": "Create React App Sample",
44
"icons": [
55
{

‎src/App.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { render, screen } from '@testing-library/react';
3+
34
import App from './App';
45

56
test('renders learn react link', () => {

‎src/App.tsx

+15-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React, { Suspense } from 'react';
2+
import { Route, Switch } from 'react-router-dom';
43

5-
function App() {
6-
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
23-
);
24-
}
4+
import Homepage from './pages/Home';
5+
import MyLibrary from './pages/MyLibrary';
6+
import NotFoundPage from './pages/NotFound';
7+
8+
const App = () => (
9+
<Suspense fallback={<div>Loading....</div>}>
10+
<Switch>
11+
<Route exact path="/" component={Homepage} />
12+
<Route exact path="/my-library" component={MyLibrary} />
13+
<Route component={NotFoundPage} />
14+
</Switch>
15+
</Suspense>
16+
);
2517

2618
export default App;

‎src/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
3+
import { BrowserRouter as Router } from 'react-router-dom';
4+
45
import App from './App';
6+
7+
import './index.css';
8+
59
import reportWebVitals from './reportWebVitals';
610

711
ReactDOM.render(
812
<React.StrictMode>
9-
<App />
13+
<Router>
14+
<App />
15+
</Router>
1016
</React.StrictMode>,
1117
document.getElementById('root')
1218
);

‎src/pages/Home.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function App() {
2+
return <div className="App">Homepage</div>;
3+
}
4+
5+
export default App;

‎src/pages/MyLibrary.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function MyLibrary() {
2+
return <div className="MyLibrary">My Library</div>;
3+
}
4+
5+
export default MyLibrary;

‎src/pages/NotFound.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function NotFound() {
2+
return <div className="NotFound">Page Not Found</div>;
3+
}
4+
5+
export default NotFound;

0 commit comments

Comments
 (0)