Skip to content

Commit

Permalink
Update README with BrowserRouter instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
sdankel authored Jan 23, 2023
1 parent b6a8658 commit 18e9b94
Showing 1 changed file with 32 additions and 5 deletions.
37 changes: 32 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,34 @@ At this point, the React app's `package.json` file includes a property named `ho
At this point, the React app's `package.json` file includes deployment scripts.
### 6. Add a "remote" that points to the GitHub repository
### 6. Enable routing for your app
1. In order for your app to work when hosted in GH pages, you'll need to provide it with a page router. To do this, first install `react-router-dom` for your project.
```shell
$ npm install react-router-dom
```
2. Wrap your `App` component in a `BrowserRouter` in your `src/index.jsx` or `src/index.tsx` file. For example, using typescript this would be:
```diff
+import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
- <App />
- </React.StrictMode>
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ </React.StrictMode>,
);
```
### 7. Add a "remote" that points to the GitHub repository
1. Add a "[remote](https://git-scm.com/docs/git-remote)" to the local Git repository.
Expand All @@ -172,7 +199,7 @@ At this point, the React app's `package.json` file includes deployment scripts.
At this point, the local repository has a "remote" whose URL points to the GitHub repository you created in Step 1.
### 7. Push the React app to the GitHub repository
### 8. Push the React app to the GitHub repository
1. Push the React app to the GitHub repository
Expand All @@ -191,7 +218,7 @@ At this point, the local repository has a "remote" whose URL points to the GitHu
At this point, the GitHub repository contains a branch named `gh-pages`, which contains the files that make up the distributable version of the React app. However, we haven't configured GitHub Pages to _serve_ those files yet.
### 8. Configure GitHub Pages
### 9. Configure GitHub Pages
1. Navigate to the **GitHub Pages** settings page
1. In your web browser, navigate to the GitHub repository
Expand All @@ -208,7 +235,7 @@ At this point, the GitHub repository contains a branch named `gh-pages`, which c
At this point, the React app is accessible to anyone who visits the `homepage` URL you specified in Step 4. For example, the React app I deployed is accessible at https://gitname.github.io/react-gh-pages.
### 9. (Optional) Store the React app's _source code_ on GitHub
### 10. (Optional) Store the React app's _source code_ on GitHub
In a previous step, the `gh-pages` npm package pushed the distributable version of the React app to a branch named `gh-pages` in the GitHub repository. However, the _source code_ of the React app is not yet stored on GitHub.
Expand Down Expand Up @@ -288,4 +315,4 @@ Note: I specified the avatars using HTML because, when I did so using Markdown,
<img src="https://github.com/jackweyhrich.png?size=40" height="40" width="40" alt="jackweyhrich" />
</a>
This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into `master`, and (b) each person who contributed in a different way (e.g. providing constructive feedback) and who approved of me including them in this list.
This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into `master`, and (b) each person who contributed in a different way (e.g. providing constructive feedback) and who approved of me including them in this list.

0 comments on commit 18e9b94

Please sign in to comment.