Simple React Router

Developer
Dan
Size
2,707 Kb
Views
4,048
  1. Simple React Router Previews
  2. Simple React Router HTML Codes
  3. Simple React Router JS Codes

How do I make an simple react router?

Simple page navigation using React Router v2.8.1. What is a simple react router? How do you make a simple react router? This script and codes were developed by Dan on 07 January 2023, Saturday.

Simple React Router Previews
IQ Test

Simple React Router - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple React Router</title>
</head>
<body> <!-- All your HTML really needs is an element to append all the JSX in the JS file to. -->
<div id="root-entry"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple React Router - Script Codes JS Codes

"use strict";
// You want to import the Router, Route, IndexRoute and Link from React Router.
var _ReactRouter = ReactRouter;
var Router = _ReactRouter.Router;
var Route = _ReactRouter.Route;
var IndexRoute = _ReactRouter.IndexRoute;
var Link = _ReactRouter.Link;
// A main React component using this.props.children will pull in all the children Routes in the router function at the bottom.
var App = React.createClass({ displayName: "App", render: function render() { return React.createElement( "div", null, this.props.children ); }
});
var Home = React.createClass({ displayName: "Home", render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Home Page" ), React.createElement( "ul", null, React.createElement( "li", null, React.createElement( Link, { to: "link-one" }, "Link 1" ) ), React.createElement( "li", null, React.createElement( Link, { to: "link-two" }, "Link 2" ) ) ) ); }
});
var LinkOne = React.createClass({ displayName: "LinkOne", render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Link 1 Page" ), React.createElement( Link, { to: "/" }, "Back Home" ) ); }
});
var LinkTwo = React.createClass({ displayName: "LinkTwo", render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Link 2 Page" ), React.createElement( Link, { to: "/" }, "Back Home" ) ); }
});
// Set a "home" route of "/" to work with the main "App" component, then use IndexRoute with the "Home' component to set it as the initial component rendered.
ReactDOM.render(React.createElement( Router, null, React.createElement( Route, { path: "/", component: App }, React.createElement(IndexRoute, { component: Home }), React.createElement(Route, { path: "link-one", component: LinkOne }), React.createElement(Route, { path: "link-two", component: LinkTwo }) )
), document.getElementById('root-entry'));
Simple React Router - Script Codes
Simple React Router - Script Codes
Home Page Home
Developer Dan
Username danbuda
Uploaded January 07, 2023
Rating 4
Size 2,707 Kb
Views 4,048
Do you need developer help for Simple React Router?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dan (danbuda) Script Codes
Name
Alphabetizing Lists with JavaScript
Sass Mixin Example
Just Some Buttons
Simple Collapsable Navbar
Sticky Footer
React Routing with this.props.children
Simple Grid
CSS Grid Using Inline-Block
React Collapsable Navbar
Sorting Items While Ignoring Articles
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!