single-page-react will replace the React component inside of routedElement with the React component whose route attribute matches the hash. Take advantage of React virtual DOM diffing by reusing components; this way re-routing can be almost instantaneous!

#####Can I pass variables to my routedElement?

Yes. The key-value pairs in the URL query are given to your React component via the this.props variable.

##Example

home.jsx /** @jsx React.DOM */

var Home = React.createClass({
	render: function() {
		return (
			<div>
				{this.props.prop1}
			</div>
		);
	},

  //When the URL hash is '#home', mount this component into the routedElement.
	route: 'home' 
});

index.html

<html>
	<head>
		
		<!-- Bring in React and single-page-react dependencies as globals -->
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
		<script src="single-page-react.js"></script>
	  
		<!-- Set which DOM element to insert React components into -->
		<script>
  			React.Router.routedElement = document.body //or whatever element you prefer
    </script>  

    <!-- Bring in the home react component -->
		<script src="home.jsx" type="text/jsx"></script>
		
	</head>

	<body>
		This text is replaced by routed React components. For example, when the url 
		ends with #home?prop1=customValue, this text will be replaced by a div whose
		content is 'customValue'
	</body>
</html>

Keywords

FAQs

What is single-page-react?

Is single-page-react well maintained?

Package last updated on 06 Sep 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install