<commit_before># react-routsy
Tiny React component for routing on individual pages

## Install

```
npm install react-router --save
```

## Usage

```html
import React, {Component, render} from 'react';
import {Route, navigateTo} from 'react-routsy';

class CustomComponent extends Component {
	
  go () {
  	
    navigateTo('/do-this');
  }
  
	render () {
		
		return (
			<div>
				<Route path='/do-this'>
					<div>This gets rendered only when the path matches</div>
				</Route>
				<Route path='/users/:id'>
					<p onClick={this.go.bind(this)}>
						This is renedered with id available on {this.props.router.params.id}.

						This is also available on child component props.
					</p>
				</Route>
				<Route path='/'>
					This gets rendered when the hash is #/ or #
				</Route>
			</div>
		);
	}
}

render(<CustomComponent />, document.body);
```

## Props

### path

*required*

The path that should trigger the rendering of the Route component. All routes are hash-based, so `/` as a path is equal to `#/` in the hash.

### paramsAsProps

*optional*

Takes and object and maps keys and objects in the route params to specified keys, and then passes them in the children component's props. This is useful in decoupling components from the router.

```html

let paramsMap = {
	id: 'somePropName'
};

<Route path="/users/:id" paramsAsProps={paramsMap}>
	<CustomComponent />
</Route>
```

`this.props.somePropName` is now available when defining `<CustomComponent />`.

## Run Tests

```<commit_msg>Change code blocks in README.md to js from html<commit_after># react-routsy
Tiny React component for routing on individual pages

## Install

```
npm install react-router --save
```

## Usage

```js
import React, {Component, render} from 'react';
import {Route, navigateTo} from 'react-routsy';

class CustomComponent extends Component {

  go () {

    navigateTo('/do-this');
  }

	render () {

		return (
			<div>
				<Route path='/do-this'>
					<div>This gets rendered only when the path matches</div>
				</Route>
				<Route path='/users/:id'>
					<p onClick={this.go.bind(this)}>
						This is renedered with id available on {this.props.router.params.id}.

						This is also available on child component props.
					</p>
				</Route>
				<Route path='/'>
					This gets rendered when the hash is #/ or #
				</Route>
			</div>
		);
	}
}

render(<CustomComponent />, document.body);
```

## Props

### path

*required*

The path that should trigger the rendering of the Route component. All routes are hash-based, so `/` as a path is equal to `#/` in the hash.

### paramsAsProps

*optional*

Takes and object and maps keys and objects in the route params to specified keys, and then passes them in the children component's props. This is useful in decoupling components from the router.

```js

let paramsMap = {
	id: 'somePropName'
};

<Route path="/users/:id" paramsAsProps={paramsMap}>
	<CustomComponent />
</Route>
```

`this.props.somePropName` is now available when defining `<CustomComponent />`.

## Run Tests

```
{'fraction_non_alphanumeric': 0.13256578947368422, 'fraction_numerical': 0.0, 'mean_word_length': 3.331908831908832, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '271124', 'n_tokens_mistral': 1068, 'n_tokens_neox': 938, 'n_words': 340}