Skip to content

Commit

Permalink
Prettify some more files
Browse files Browse the repository at this point in the history
  • Loading branch information
mjackson committed Nov 17, 2018
1 parent 30c0047 commit dc7facf
Show file tree
Hide file tree
Showing 16 changed files with 270 additions and 224 deletions.
3 changes: 3 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"singleQuote": false
}
272 changes: 136 additions & 136 deletions CHANGES.md

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Thanks for contributing, you rock!

If you use our code, it is now *our* code.
If you use our code, it is now _our_ code.

Please read https://reactjs.org/ and the Code of Conduct before opening an issue.

Expand All @@ -12,21 +12,25 @@ Please read https://reactjs.org/ and the Code of Conduct before opening an issue
- [Development](#development)

<a name="bug"/></a>

## Think You Found a Bug?

Please provide a test case of some sort. Best is a pull request with a failing test. Next is a link to CodePen/JS Bin or repository that illustrates the bug. Finally, some copy/pastable code is acceptable.

<a name="api"/></a>

## Proposing New or Changed API?

Please provide thoughtful comments and some sample code. Proposals without substance will be closed.

<a name="attention"/></a>

## Issue Not Getting Attention?

If you need a bug fixed and nobody is fixing it, it is your responsibility to fix it. Issues with no activity for 30 days may be closed.

<a name="pr"/></a>

## Making a Pull Request?

Pull requests need only the :+1: of two or more collaborators to be merged; when the PR author is a collaborator, that counts as one.
Expand All @@ -51,12 +55,15 @@ The following steps will get you setup to contribute changes to this repo:

1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of this page).
2. Clone your fork locally.

```bash
# in a terminal, cd to parent directory where you want your clone to be, then
git clone https://github.com/<your_github_username>/react-router.git
cd react-router
```

3. Install dependencies and build. React Router uses `npm`, so you should too. If you install using `yarn`, unnecessary yarn lock files will be generated.

```bash
npm install
npm run build
Expand All @@ -73,6 +80,7 @@ React Router uses Lerna to manage the monorepo. Lerna sets up symlinks between t
### Building

Calling `npm run build` from the root directory will build every package. If you want to build a specific package, you should `cd` into that directory.

```bash
# build everything
npm run build
Expand All @@ -84,18 +92,21 @@ npm run build
### Testing

Calling `npm test` from the root directory will run **every** package's tests. If you want to run tests for a specific package, you should `cd` into that directory.

```bash
# all tests
npm test
# react-router-dom tests
cd packages/react-router-dom
npm test
```

React Router uses Jest to run its tests, so you can provide the `--watch` flag to automatically re-run tests when files change.

### Website

The code for the documentation website lives in the `website` directory. `cd` into there and call `npm start` to start a webpack dev server on `localhost:8080` that will watch for changes.

```bash
cd website
npm start
Expand Down
60 changes: 33 additions & 27 deletions FAQ.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Frequently Asked Questions

This is a list of support questions that frequently show up in GitHub issues. This list is intended to minimize the frequency of this happening. The issues section is intended for bug reports, not developer support. Support questions should be asked at StackOverflow or in the Reactiflux chat.
This is a list of support questions that frequently show up in GitHub issues. This list is intended to minimize the frequency of this happening. The issues section is intended for bug reports, not developer support. Support questions should be asked at StackOverflow or in the Reactiflux chat.

If there is a support question that you frequently see being asked, please open a PR to add it to this list.

* [Why aren't my components updating when the location changes?](#why-arent-my-components-updating-when-the-location-changes)
* [Why doesn't my application render after refreshing?](#why-doesnt-my-application-render-after-refreshing)
* [Why doesn't my application work when loading nested routes?](#why-doesnt-my-application-work-when-loading-nested-routes)
* [How do I access the `history` object outside of components?](#how-do-i-access-the-history-object-outside-of-components)
* [How do I pass props to the component rendered by a `<Route>`?](#how-do-i-pass-props-to-the-component-rendered-by-a-route)
- [Why aren't my components updating when the location changes?](#why-arent-my-components-updating-when-the-location-changes)
- [Why doesn't my application render after refreshing?](#why-doesnt-my-application-render-after-refreshing)
- [Why doesn't my application work when loading nested routes?](#why-doesnt-my-application-work-when-loading-nested-routes)
- [How do I access the `history` object outside of components?](#how-do-i-access-the-history-object-outside-of-components)
- [How do I pass props to the component rendered by a `<Route>`?](#how-do-i-pass-props-to-the-component-rendered-by-a-route)

### Why aren't my components updating when the location changes?

Expand All @@ -19,13 +19,14 @@ React Router relies on updates propagating from your router component to every c
If your application is hosted on a static file server, you need to use a `<HashRouter>` instead of a `<BrowserRouter>`.

```js
import { HashRouter } from 'react-router-dom'
import { HashRouter } from "react-router-dom";

ReactDOM.render((
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
), holder)
</HashRouter>,
holder
);
```

When you load the root page of a website hosted on a static file server (e.g., `http://www.example.com`), a `<BrowserHistory>` might appear to work. However, this is only because when the browser makes the request for the root page, the server responds with the root `index.html` file.
Expand All @@ -45,9 +46,9 @@ However, you will end up with a blank screen if you were to refresh a non-root p
This is not an issue when your server can respond to dynamic requests. In that situation, you can instruct the server to catch all requests and serve up the same `index.html` file.

```js
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'))
})
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "index.html"));
});
```

When you use a static server, your application should have just one `index.html` file.
Expand Down Expand Up @@ -75,6 +76,7 @@ If the `src` of the `<script>` tag that is used to load your application has a r
<script src='static/js/bundle.js'></script>
<script src='./static/js/bundle.js'></script>
```

### How do I access the `history` object outside of components?

When you use the `<BrowserRouter>`, `<HashRouter>`, `<MemoryRouter>`, and `<NativeRouter>`, a `history` object will be created for you. This is convenient, and the `history` object is readily accessible from within your React components, but it can be a pain to use it outside of them. If you need to access a `history` object outside of your components, you will need to create your own `history` object (in its own module) and import it throughout your project.
Expand All @@ -83,23 +85,26 @@ If you do this, make sure that you use the generic `<Router>` component and not

```js
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory()
import { createBrowserHistory } from "history";
export default createBrowserHistory();
```

```js
// index.js
import { Router } from 'react-router-dom';
import history from './history'
import { Router } from "react-router-dom";
import history from "./history";

ReactDOM.render((
ReactDOM.render(
<Router history={history}>
<App />
</Router>
), document.getElementById('root'))
</Router>,
document.getElementById("root")
);
```

```js
// nav.js
import history from './history'
import history from "./history";

export default function nav(loc) {
history.push(loc);
Expand All @@ -116,11 +121,12 @@ If you need to pass props to the component rendered by a `<Route>`, you should u

```js
const App = () => {
const color = 'red'
const color = "red";
return (
<Route path='/somewhere' render={(props) => (
<MyComponent {...props} color={color} />
)} />
)
}
<Route
path="/somewhere"
render={props => <MyComponent {...props} color={color} />}
/>
);
};
```
2 changes: 2 additions & 0 deletions ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ Remove the template from below and provide thoughtful commentary *and code sampl
-->

<!-- BUG TEMPLATE -->

## Version

**Please replace this sentence with the React Router version that you are using.**

## Test Case

https://codesandbox.io/s/7zwjlm2j3q

## Steps to reproduce
Expand Down
63 changes: 35 additions & 28 deletions packages/react-router-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ Then with a module bundler like [webpack](https://webpack.github.io/), use as yo

```js
// using an ES6 transpiler, like babel
import { matchRoutes, renderRoutes } from 'react-router-config'
import { matchRoutes, renderRoutes } from "react-router-config";

// not using an ES6 transpiler
var matchRoutes = require('react-router-config').matchRoutes
var matchRoutes = require("react-router-config").matchRoutes;
```

The UMD build is also available on [unpkg](https://unpkg.com):
Expand Down Expand Up @@ -52,23 +52,27 @@ Routes are objects with the same properties as a `<Route>` with a couple differe

```js
const routes = [
{ component: Root,
{
component: Root,
routes: [
{ path: '/',
{
path: "/",
exact: true,
component: Home
},
{ path: '/child/:id',
{
path: "/child/:id",
component: Child,
routes: [
{ path: '/child/:id/grand-child',
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
]
];
```

**Note**: Just like `<Route>`, relative paths are not (yet) supported. When it is supported there, it will be supported here.
Expand All @@ -80,12 +84,13 @@ const routes = [
Returns an array of matched routes.

#### Parameters

- routes - the route configuration
- pathname - the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname) component of the url. This must be a decoded string representing the path.

```js
import { matchRoutes } from 'react-router-config'
const branch = matchRoutes(routes, '/child/23')
import { matchRoutes } from "react-router-config";
const branch = matchRoutes(routes, "/child/23");
// using the routes shown earlier, this returns
// [
// routes[0],
Expand All @@ -99,8 +104,8 @@ Each item in the array contains two properties: `routes` and `match`.
- `match`: The match object that also gets passed to `<Route>` render methods.

```js
branch[0].match.url
branch[0].match.isExact
branch[0].match.url;
branch[0].match.isExact;
// etc.
```

Expand Down Expand Up @@ -191,63 +196,65 @@ Again, that's all pseudo-code. There are a lot of ways to do server rendering wi
In order to ensure that matching outside of render with `matchRoutes` and inside of render result in the same branch, you must use `renderRoutes` instead of `<Route>` inside your components. You can render a `<Route>` still, but know that it will not be accounted for in `matchRoutes` outside of render.

```js
import { renderRoutes } from 'react-router-config'
import { renderRoutes } from "react-router-config";

const routes = [
{ component: Root,
{
component: Root,
routes: [
{ path: '/',
{
path: "/",
exact: true,
component: Home
},
{ path: '/child/:id',
{
path: "/child/:id",
component: Child,
routes: [
{ path: '/child/:id/grand-child',
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
]
];

const Root = ({ route }) => (
<div>
<h1>Root</h1>
{/* child routes won't render without this */}
{renderRoutes(route.routes)}
</div>
)
);

const Home = ({ route }) => (
<div>
<h2>Home</h2>
</div>
)
);

const Child = ({ route }) => (
<div>
<h2>Child</h2>
{/* child routes won't render without this */}
{renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
{renderRoutes(route.routes, { someProp: "these extra props are optional" })}
</div>
)
);

const GrandChild = ({ someProp }) => (
<div>
<h3>Grand Child</h3>
<div>{someProp}</div>
</div>
)

);

ReactDOM.render((
ReactDOM.render(
<BrowserRouter>
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</BrowserRouter>
), document.getElementById('root'))

</BrowserRouter>,
document.getElementById("root")
);
```

8 changes: 4 additions & 4 deletions packages/react-router-dom/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ Then with a module bundler like [webpack](https://webpack.github.io/), use as yo

```js
// using ES6 modules
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { BrowserRouter, Route, Link } from "react-router-dom";

// using CommonJS modules
const BrowserRouter = require('react-router-dom').BrowserRouter
const Route = require('react-router-dom').Route
const Link = require('react-router-dom').Link
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;
```

The UMD build is also available on [unpkg](https://unpkg.com):
Expand Down

0 comments on commit dc7facf

Please sign in to comment.