I have my app code here: https://github.com/WebTerminator/aldemar/commits/master
and I am trying to get my react app to work on the server side as well, at this stage it works partially.
The problem I have is: (sam problem happens on localhost)
if I navigate within the browser it all works fine, the moment I refresh this URL https://aldemar-productions.herokuapp.com/projects/margam2 I get a console error like:
bundle.js:1 Uncaught SyntaxError: Unexpected token <
If I refresh others URLs like "https://aldemar-productions.herokuapp.com/projects" or "https://aldemar-productions.herokuapp.com/about" they work fine.
server.js
import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './src/client/app/config/routes.jsx';
let port = process.env.PORT || 8080;
let app = express();
app.use(express.static('src/client/'));
// app.get('/', (req, res) => {
// res.sendFile(path.resolve(__dirname + '/src/client/index.html'))
// });
app.get('*', (req, res) => {
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
markup = renderToString(<RouterContext {...renderProps}/>);
}
// else {
// // otherwise we can render a 404 page
// markup = renderToString(<NotFoundPage/>);
// res.status(404);
// }
// render the index template with the embedded React markup
return res.sendFile('index.html', {root : __dirname + '/src/client/'});
}
);
});
app.listen(port);
console.log('server started');
routes.jsx
import React from 'react';
import { Route, Router, browserHistory } from 'react-router';
import ReactDOM from 'react-dom';
import Wrapper from './../components/wrapper.jsx';
import Home from './../components/home.jsx';
import Projects from './../components/projects.jsx';
import SingleProject from './../components/projectContent/singleProject.jsx';
import About from './../components/aboutUs.jsx'
if(typeof window !== 'undefined') {
console.log('here baby');
ReactDOM.render((
<Router history={browserHistory} >
<Route component={Wrapper} >
<Route path="/" component={Home} />
<Route path="projects" component={Projects} />
<Route path="projects/:id" component={SingleProject} />
<Route path="about" component={About} />
</Route>
</Router>
), document.getElementById('app'));
}
singleProject.jsx (where I get the ID parameter from url to load the specific data)
import React from 'react';
import Video from './../video.jsx';
import Overview from './overview.jsx';
import Photography from './photography.jsx';
import Details from './details.jsx';
import Cast from './cast.jsx';
import porgectsCollection from './../../data/projectInfo.js';
import { StickyContainer, Sticky } from 'react-sticky';
class Nav extends React.Component {
constructor(props) {
super(props);
this.state = {
mobileMenu: false
};
}
showMobileMenu () {
this.setState({ mobileMenu: !this.state.mobileMenu });
}
render () {
let links = this.props.project.links.map(function(el, i){
return <li key={i}>{el}</li>;
});
const open = this.state.mobileMenu ? ' open' : '';
return (
<Sticky stickyClassName="sticky-nav" topOffset={-100}>
<span onClick={this.showMobileMenu.bind(this)} className="mobile-trigger">X</span>
<nav className={"secondary-nav" + open}>
<ul>
{links}
</ul>
</nav>
</Sticky>
);
}
}
class SingleProject extends React.Component {
getProjectDataFromUrl() {
return **porgectsCollection.filter(el => el.title === this.props.params.id)**;
}
render () {
let data = this.getProjectDataFromUrl(),
project = data[0];
return (
<section className="project-page">
<StickyContainer>
<Video project={project} />
<Nav project={project} />
<Overview project={project} />
<Photography project={project} />
<Details project={project} />
<Cast project={project} />
</StickyContainer>
</section>
);
}
}
export default SingleProject;
When I hit a url like this "https://aldemar-productions.herokuapp.com/projects/margam2" I collect "margam2" as per my routes:
<Route path="projects/:id" component={SingleProject} />
and I load specific data based on that parameter. I believe the problem is around here with doing server side rendering.
UPDATE-1
adding this in the head of my index.html allows to get the content displayed when I refresh the page however the CSS is missing:
<base href="/" />
the css is fully accessible at http://localhost:8080/css/style.css, however when I refresh "http://localhost:8080/projects/margam2" the content is displayed but not the css.
Ok after 2 days of research, this has helped me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
**<base href="/" />**
<link rel="stylesheet" href="./css/foundation.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</head>
<body>
<div id="app"></div>
<script src="./public/bundle.js" type="text/javascript"></script>
</body>
</html>
however I also found out this in my console:
browser.js:49 Warning: Automatically setting basename using is deprecated and will be removed in the next major release. The semantics of are subtly different from basename. Please pass the basename explicitly in the options to createHistory
so need to find a solution for this.
update-1
even better solution I think. I have changed the assets path form relative to absolute:
see the "/" in front of every local asset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/foundation.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</head>
<body>
<div id="app"></div>
<script src="/public/bundle.js" type="text/javascript"></script>
</body>
</html>
On your project's page, you are using an inline close div, like this:
<div id="app" />
In all your other pages, you are using a empty div
<div id="app" > </div>
And that's the right way to do it.
React-Router do not re-render your page, it only "re-add" your react code to your id="app".
That's why when you open clicking it works and when you refresh it broke.
Related
|project-name
| client
| public
| index.html
| server.js
↑ Project structure
My purpose is to display index.html(in public) in server.js.
[ server.js ]
const express = require('express')
const app = express()
const path = require('path')
app.listen(8080, function() {
console.log('listening on 8080')
})
app.use(express.static(path.join(__dirname, 'client/public')))
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'client/public/index.html'))
})
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/public/index.html'))
})
I wrote the code as above, but when I run node server.js to open the server and connect to localhost:8080, nothing happens.
It seems that the path is not wrong, but I wonder why the React project I made doesn't come out.
[ public > index.html ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/public/logo192.png" />
<link rel="/manifest" href="/public/manifest.json" />
<title>Project Name</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
[ index.js in client ]
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // 추가됨
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
[ App.js in client ]
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Main from './pages/Main'
import Login from './pages/Login'
import Register from './pages/Register'
function App() {
return (
<div className='App'>
<div>
<Routes>
<Route path='/' element={<Main />} />
<Route path='/login' element={<Login />} />
<Route path='/register' element={<Register />} />
</Routes>
</div>
</div>
);
};
export default App;
Let me know if you need more code.
Here is the best way to render public HTML files.
Set the view engine like that.
app.set('view engine', 'html');
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index');
});
The second option is no need to set the view engine.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/about.html');
});
I'm having an issue displaying data pulled in (from Prismic) with getInitialProps in the _app.js file. I have followed the Prismic slice machine tutorial, which includes defining a header and navigation in Prismic and displaying that data on the frontend - that all works fine.
I've defined a footer now, have included the call for the footer data in the same place and way I have for the header data in the _app.js file, but that data does not display on the frontend. The error message I am seeing is:
TypeError: Cannot read properties of undefined (reading 'data')
and references the call stack to my _document.js file, but I cannot understand where the issue is in that file.
_document.js:
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { repoName } from '../prismicConfiguration'
import Link from 'next/link'
export default class extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
<script async defer src={`//static.cdn.prismic.io/prismic.js?repo=${repoName}&new=true`} />
</Head>
<body className="">
<Main />
<NextScript />
</body>
</Html>
)
}
}
_app.js:
import React from 'react'
import NextApp from 'next/app'
import { Client } from '../utils/prismicHelpers'
import '../styles/style.scss'
export default class MyApp extends NextApp {
static async getInitialProps(appCtx) {
const menu = await Client().getSingle('menu') || null
const footer = await Client().getSingle('footer') || null
console.log("FOOTER", footer)
console.log("MENU",menu)
return {
props: {
menu: menu,
footer: footer
},
}
}
render() {
const { Component, pageProps, props } = this.props
return (
<Component {...pageProps} menu={props.menu} footer={props.footer} />
)
}
}
Footer.js (where the data should be getting displayed):
import React from 'react'
import Link from 'next/link'
// Project functions
import { linkResolver } from '../prismicConfiguration'
import { RichText } from 'prismic-reactjs'
// Footer component
export default function Footer({ footer }) {
return (
<footer className="footer">
<div className="container max-width-lg">
{footer.data.eyebrow}
<RichText render={footer.data.headline} />
<RichText render={footer.data.description} />
<Link href={linkResolver(footer.data.link)}>
<a>
{footer.data.linkLabel}
</a>
</Link>
{ footer.data.copyrightText }
{ footer.data.signoffText }
</div>
</footer>
)
}
I'm so confused as to why this footer data cannot be displayed or read when it has been defined and called in the same way as the header, which works completely fine. I am console logging both sets of data in the _app.js file and both are returning fine in the terminal, so I am confident what I am adding to the footer component file is correct. For some context, the reason I am pulling this data in the _app.js file is that its data that needs to be across all pages rather than calling it on every single page.
Where am I going wrong here?
Thanks
Addition:
The Footer component is being added to a layout component:
import React from 'react'
import { useEffect } from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import Script from 'next/Script'
// Components
import Header from './Header'
import Footer from './Footer'
// Project functions
import * as gtag from '../lib/gtag'
// Layout component
const Layout = ({ children, footer, menu }) => {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return (
<div className="page_wrapper">
<Head>
{/* <meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon/favicon.ico" />
<script dangerouslySetInnerHTML={{ __html: `document.getElementsByTagName("html")[0].className += " js";`}}
/> */}
{/* <Link
rel="preload"
href="/fonts/font-file.woff2"
as="font"
crossOrigin=""
/> */}
</Head>
<Script
id="codyhouse-utils-js"
src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"
strategy="beforeInteractive"
/>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
{/* <Script
src="https://www.google.com/recaptcha/api.js?&render=explicit"
strategy="afterInteractive"
/> */}
<Header menu={menu} />
<main>
{children}
</main>
<Footer footer={footer} />
</div>
);
};
export default Layout
I am building my first Next.js site with Redux and I am running into a problem with the error:
Error: could not find react-redux context value; please ensure the
component is wrapped in a
I am using _document.js to create 'template' for my site, which includes a header and footer:
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { PublicHeader, Footer } from '../components';
class Public extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700&family=Poppins:wght#300;400;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/aa1831f3ef.js" crossOrigin="anonymous"></script>
</Head>
<body>
<PublicHeader />
<Main />
<Footer />
<NextScript>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossOrigin="anonymous"></script>
</NextScript>
</body>
</Html>
)
}
}
export default Public
I have Redux set up with a store and then I wrapped the _app.js with the Provider.
import '../styles/css/main.css';
import { useStore } from '../redux/store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'
export default function App({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState)
const persistor = persistStore(store, {}, function () {
persistor.persist()
})
return (
<Provider store={store}>
<PersistGate loading={<div>loading</div>} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
)
}
All works fine inside the pages but when I try to use useDispatch or useSelector, I get the error. I am assuming it is because the _document is above the _app so it can wrap the template around it, but how can I make the store and dispatch available to the _document?
You should not add React components in _document - that should be done in _app instead.
From the Custom Document documentation:
Document is only rendered in the server, event handlers like onClick won't work.
React components outside of <Main /> will not be initialized by the browser. Do not add application logic here or custom CSS (like
styled-jsx). If you need shared components in all your pages (like a
menu or a toolbar), take a look at the App component instead.
The solution is to move PublicHeader and Footer to your custom _app, so they get initialised properly and have access to the Redux store.
export default function App({ Component, pageProps }) {
// Remaining code
return (
<Provider store={store}>
<PersistGate loading={<div>loading</div>} persistor={persistor}>
<PublicHeader />
<Component {...pageProps} />
<Footer />
</PersistGate>
</Provider>
)
}
When running my application on the localhost I had no problem visiting urls that I manually typed in or refreshing the page but after using heroku to deploy the app, I can only visit pages by navigating through the home page. After reading some posts on here( React-router urls don't work when refreshing or writing manually ) , I decided to try to apply a "catch-all" solution. I have implemented the /* function in the 'server.js' file but the webpage loads the blank index.html page instead of the correct react component and can not figure out why. The code for the related pages are below:
Api.js
`
const request = require('request');
const express = require('express');
const app = express();
const router = express.Router();
var varViews = 0;
const {createServer} = require('http');
const path = require('path');
const PORT = process.env.PORT || 3000
const dev = app.get('env') !== 'production'
if(!dev){
console.log("Not Dev mode");
app.use(express.static(path.resolve(__dirname, 'build')));
app.use(express.static(__dirname + '/public'));
app.get("/", (req, res) => {
console.log('Home page');
res.send("This is the home page");
})
app.post("/usbstat", (req, res) => {
varViews++;
var views = {views: varViews};
res.json(views);
})
app.delete("/usbstat", (req, res) => {
varViews = 0;
var views = {views: 0};
res.json(views);
})
app.get("/usbstat", (req, res) => {
var numViews = {views: varViews};
return res.json(numViews);
})
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '/public/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
}
app.listen(PORT, () => {
console.log('App is listening on'+PORT);
})
module.exports = app;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Nova Cyber Security Test</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="../src/index.js"></script>
</body>
</html>
app.js
import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import history from './history';
import Home from './pages/home/Home';
import USBDrive from './pages/usbdrive/USBDrive';
import phishingStats from './pages/phishingStats/phishingStats';
import Admin from './pages/admin/Admin';
class App extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/USBStats' component={USBDrive}/>
<Route exact path='/phishingStats' component={phishingStats}/>
<Route exact path='/admin' component={Admin}/>
</Switch>
</Router>
);
}
}
export default App;
Resume: I need to run React Router without wepback or similar tools. Directly from CDN links, but I'm stuck with some require.js error.
I'm starting to build my first App with React and I'm struggling with React Router.
HTML:
<body>
<div id="container"></div>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script src="https://npmcdn.com/react-router#2.4.0/umd/ReactRouter.js"></script>
<script type="text/babel" src="assets/scripts/03_templates/app.js" charset="utf-8"></script>
</body>
JS:
var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;
//some classes
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Window}>
<IndexRoute component={InitialPage}/>
<Route path="register" component={Register} />
<Route path="search" component={Search} />
</Route>
</Router>
), document.getElementById("container"));
Everything is running fine but i get this on console:
react.js:3639 Warning: You are manually calling a React.PropTypes
validation function for the getComponent prop on IndexRoute. This
is deprecated and will not work in production with the next major
version. You may be seeing this warning due to a third-party PropTypes
library.
So, I suppose my react Router is a old version. I changed the link to
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>
Warning: React.createElement: type should not be null, undefined,
boolean, or number. It should be a string (for DOM elements) or a
ReactClass (for composite components).
I search about it and it seems the problem is on line 1. So I changed this:
var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;
To this:
import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';
And now I have this problem:
app.js:2 Uncaught ReferenceError: require is not defined
I searched for require.js, tried some stuff but nothing fixed my problem. What am I missing? I need to run this without webpack or similars tools.
Thanks
for react route v4.0,please read react-router package
add two js link on your page:
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
in js code you can use :
const Router = window.ReactRouterDOM.BrowserRouter;
const Route = window.ReactRouterDOM.Route;
const Link = window.ReactRouterDOM.Link;
const Prompt = window.ReactRouterDOM.Prompt;
const Switch = window.ReactRouterDOM.Switch;
const Redirect = window.ReactRouterDOM.Redirect;
also,can use
console.log(window.ReactRouterDOM);
to out put all object like:
ReactRouteDOM Objects
Here's a minimal example of how this can be accomplished:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom#5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const Link = ReactRouterDOM.Link,
Route = ReactRouterDOM.Route;
const App = props => (
<ReactRouterDOM.HashRouter>
<ul>
<li><Link to="/">TO HOME</Link></li>
<li><Link to="/a">TO A</Link></li>
<li><Link to="/b">TO B</Link></li>
</ul>
<Route path="/" exact component={Home} />
<Route path="/a" component={A} />
<Route path="/b" component={B} />
</ReactRouterDOM.HashRouter>
)
const Home = props => <h1>HOME</h1>
const A = props => <h1>A</h1>
const B = props => <h1>B</h1>
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
Use this on top of your javascript:
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;
and remove the import statements.
I'm currently using this react-router package: https://unpkg.com/react-router#3.0.0/umd/ReactRouter.js
EDIT:
Here's an example at CodePen: http://codepen.io/lsmoura/pen/pNPOzp -- it uses no import statements.