react-bootstrap · kyletsang · Nov 11, 2021 · Oct 23, 2021 · Oct 23, 2021 · Oct 29, 2021
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) examples.
 
-## Examples
+## Examples v4
 
 - [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) - Just a simple create-react-app setup with React-Bootstrap components.
 - [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
@@ -13,3 +13,13 @@ The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) exam
 - [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming) - Another simple create-react-app setup, this time by using Sass with custom theming
 - [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel) - Just a simple Parcel setup with React-Bootstrap components.
 - [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
+
+## Examples v5
+
+- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-v5)- Just a simple create-react-app setup with React-Bootstrap components.
+- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn-v5) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
+- [Basic Example with React-Router-Bootstrap](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-react-router-v5) - Just a simple create-react-app setup with React-Router-Bootstrap.
+- [Basic Example with TypeScript](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-ts-v5) - Another simple create-react-app setup, this time by using TypeScript
+- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming-v5) - Another simple create-react-app setup, this time by using Sass with custom theming
+- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-v5) - Just a simple Parcel setup with React-Bootstrap components.
+- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts-v5) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
diff --git a/basic-react-router-v5/README.md b/basic-react-router-v5/README.md
@@ -0,0 +1,3 @@
+# Basic Example with React-Router-Bootstrap
+
+A simple [create-react-app](CRA-README.md) setup, showcasing how it works with React-Router-Bootstrap
diff --git a/basic-react-router-v5/package.json b/basic-react-router-v5/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "code-sandbox-examples",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^5.1.3",
+    "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0",
+    "react-dom": "^17.0.2",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/basic-react-router-v5/public/index.html b/basic-react-router-v5/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React-Bootstrap CodeSandbox Starter</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/basic-react-router-v5/src/App.css b/basic-react-router-v5/src/App.css
@@ -0,0 +1,11 @@
+.header {
+  text-align: center;
+}
+
+.custom-btn-toolbar {
+  display: inline !important;
+}
+
+.custom-btn-toolbar > .btn {
+  margin-right: 1rem;
+}
diff --git a/basic-react-router-v5/src/App.js b/basic-react-router-v5/src/App.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { MemoryRouter, Switch, Route } from 'react-router-dom';
+
+import Container from 'react-bootstrap/Container';
+import Button from 'react-bootstrap/Button';
+import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
+import { LinkContainer } from 'react-router-bootstrap';
+
+import './App.css';
+
+const Home = () => <span>Home</span>;
+
+const About = () => <span>About</span>;
+
+const Users = () => <span>Users</span>;
+
+const App = () => (
+  <MemoryRouter>
+    <Container className="p-3">
+      <Container className="p-5 mb-4 bg-light rounded-3">
+        <h1 className="header">Welcome To React-Bootstrap</h1>
+        <h2>
+          Current Page is{' '}
+          <Switch>
+            <Route path="/about">
+              <About />
+            </Route>
+            <Route path="/users">
+              <Users />
+            </Route>
+            <Route path="/">
+              <Home />
+            </Route>
+          </Switch>
+        </h2>
+        <h2>
+          Navigate to{' '}
+          <ButtonToolbar className="custom-btn-toolbar">
+            <LinkContainer to="/">
+              <Button>Home</Button>
+            </LinkContainer>
+            <LinkContainer to="/about">
+              <Button>About</Button>
+            </LinkContainer>
+            <LinkContainer to="/users">
+              <Button>Users</Button>
+            </LinkContainer>
+          </ButtonToolbar>
+        </h2>
+      </Container>
+    </Container>
+  </MemoryRouter>
+);
+
+export default App;
diff --git a/basic-react-router-v5/src/App.test.js b/basic-react-router-v5/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/basic-react-router-v5/src/index.js b/basic-react-router-v5/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+// Importing the Bootstrap CSS
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Basic Example with React-Router-Bootstrap

		A simple [create-react-app](CRA-README.md) setup, showcasing how it works with React-Router-Bootstrap