From 665f5ed6d57848610c43b40995707966378bc2da Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil <viankakrisna@gmail.com> Date: Thu, 29 Jun 2017 00:51:17 +0700 Subject: [PATCH 1/5] Docs for react-router v4 basename feature Fix https://github.com/facebookincubator/create-react-app/issues/2593 --- packages/react-scripts/template/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index aa2ab434062..d95233b4d15 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1784,6 +1784,15 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. +If you are using react-router v4 for your client side routing, it supports `basename` config in the `BrowserRouter`. For example: + +```js +<BrowserRouter basename="/calendar"/> +<Link to="/today"/> // renders <a href="/calendar/today"> +``` + +So, all the `Link` component inside your app will navigate properly. Learn more [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string) + #### Serving the Same Build from Different Paths >Note: this feature is available with `react-scripts@0.9.0` and higher. From 4600daea9abacbf78f21e82633b7ab1226353222 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Wed, 12 Jul 2017 15:39:31 -0400 Subject: [PATCH 2/5] Update README.md --- packages/react-scripts/template/README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d95233b4d15..740fca2c039 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1784,15 +1784,13 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. -If you are using react-router v4 for your client side routing, it supports `basename` config in the `BrowserRouter`. For example: - -```js +>Note: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`. See more information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). +>For example: +>```js <BrowserRouter basename="/calendar"/> <Link to="/today"/> // renders <a href="/calendar/today"> ``` -So, all the `Link` component inside your app will navigate properly. Learn more [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string) - #### Serving the Same Build from Different Paths >Note: this feature is available with `react-scripts@0.9.0` and higher. From 8104d3b79269e3b8c25f9003050b5ccb7deedd12 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Wed, 12 Jul 2017 15:44:02 -0400 Subject: [PATCH 3/5] Update README.md --- packages/react-scripts/template/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 740fca2c039..01734f8d069 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1786,10 +1786,10 @@ This will let Create React App correctly infer the root path to use in the gener >Note: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`. See more information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). >For example: ->```js -<BrowserRouter basename="/calendar"/> -<Link to="/today"/> // renders <a href="/calendar/today"> -``` + ```js + <BrowserRouter basename="/calendar"/> + <Link to="/today"/> // renders <a href="/calendar/today"> + ``` #### Serving the Same Build from Different Paths From 566bfd07755410a952ff30cde4294b525ace2247 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Wed, 12 Jul 2017 15:46:48 -0400 Subject: [PATCH 4/5] Update README.md --- packages/react-scripts/template/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 01734f8d069..2c4c4ac2b40 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1784,12 +1784,12 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. ->Note: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`. See more information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). ->For example: - ```js - <BrowserRouter basename="/calendar"/> - <Link to="/today"/> // renders <a href="/calendar/today"> - ``` +**Note**: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`. See more information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). +For example: +```js +<BrowserRouter basename="/calendar"/> +<Link to="/today"/> // renders <a href="/calendar/today"> +``` #### Serving the Same Build from Different Paths From 0e456803af98967e7bdbe4b469f9728f73d4039f Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Wed, 12 Jul 2017 15:48:27 -0400 Subject: [PATCH 5/5] Update README.md --- packages/react-scripts/template/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2c4c4ac2b40..35ac1c319a9 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1784,7 +1784,9 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. -**Note**: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`. See more information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). +**Note**: If you are using `react-router@^4`, you can root `<Link>`s using the `basename` prop on any `<Router>`.<br> +More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).<br> +<br> For example: ```js <BrowserRouter basename="/calendar"/>