React routing without node

Question

I am using react.js but not using nodes server. I need a solution for routing, but it seems react-router is working with node. if that is not, give me some example how to integrate react router. if not I need another router which working with react.

It's not really clear what you are asking. React router works at the client side too, because it's implemented with React components. There's no requirement to use Node. — Dan Prince
– Dan Prince, Commented Mar 2, 2016 at 10:17
can you please give me clear example? I am not clear how to import and initialize react router in my app. — semira
– semira, Commented Mar 2, 2016 at 10:29
Have you followed the official tutorial? github.com/reactjs/react-router-tutorial — Dan Prince
– Dan Prince, Commented Mar 2, 2016 at 10:32
yes i did it with several resources. but what I didn't understand below code : import React from 'react'; import Router from 'react-router'; import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; — semira
– semira, Commented Mar 2, 2016 at 10:38
It's ES6 syntax, the tutorial expects you to be using an ES6 environment or transpiling your code with [babel](babeljs.io). — Dan Prince
– Dan Prince, Commented Mar 2, 2016 at 10:56

puiu · Accepted Answer · 2017-01-04 20:34:03Z

Building off of @semira here is how I implemented a buildless react application.

Inside of ./index.html (or ./index.php in my case) we load the React library, React router, and the Babel transpiler that will convert ES6 javascript so that browsers can interpret it. Note that you have to explicitly state the script type as text/babel in order for the Babel transpiler to convert ES6 javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App Boilerplate</title>
    <!-- Foundation 6.3.0 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <!------------------------------------------------------------------------------------------------------------------>
    <!-- Dependencies -->
    <!------------------------------------------------------------------------------------------------------------------>
    <!-- Babel ES6 to ES5 Transpiler -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

    <!-- React Library -->
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <!-- React Router -->
    <script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>


    <!------------------------------------------------------------------------------------------------------------------>
    <!-- React Components -->
    <!------------------------------------------------------------------------------------------------------------------>
    <script type="text/babel" src="app/components/App.js"></script>
    <script type="text/babel" src="app/components/About.js"></script>


    <!-- Application entry point -->
    <script type="text/babel" src="app/app.js"></script>
</body>
</html>

Where ./app/components/About.js is a stateless React component written in ES6:

const About = () => <h2>About Page</h2>;

Where ./app/components/App.js is a React component written in ES6:

class App extends React.Component {

    render() {

        return (

            <div>
                <h2>App Page</h2>
            </div>

        );

    }

}

Then inside of .app/app.js notice how we can still make the code look like the documentation by storing the ReactDOM and ReactRouter as references.

let render = ReactDOM.render;
let browserHistory = ReactRouter.browserHistory;
let Router = ReactRouter.Router;
let Route = ReactRouter.Route;
let IndexRoute = ReactRouter.IndexRoute;
let Link = ReactRouter.Link;

render((

    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
        </Route>
    </Router>

), document.getElementById('app'))

semira · Accepted Answer · 2016-03-03 05:31:53Z

2

Finally I found what I was finding. Thanks for all the help.

var routes = (
   <ReactRouter.Router>
    <ReactRouter.Route name="app" path="/" component={App}/> 
    <ReactRouter.Route name="app" path="new" component={CreateApp}/>  
  </ReactRouter.Router>
);


ReactDOM.render(
    <ReactRouter.Router>{routes}</ReactRouter.Router>,
    document.getElementById('content')
);

answered Mar 3, 2016 at 5:31

semira

3513 silver badges13 bronze badges

2 Comments

semira Over a year ago

what I had, an importing issue of react router without using ES6. "ReactRouter.Router" solved it.

Gadzooks34 Over a year ago

This is exactly what I needed to do. Saved me hours of work.

Sagi Medina · Accepted Answer · 2016-03-02 12:22:52Z

0

React can work with any server that return HTML file. The html file includes a JS file which looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './js/containers/root';
import createBrowserHistory from 'history/lib/createBrowserHistory';

const history = createBrowserHistory();

ReactDOM.render(
  <Root history={ history } />,
  document.getElementById('app')
);

And the routing can be manage by react-router which looks something like this:

import React, {PropTypes, Component} from 'react';
import { IndexRoute, Router, Route } from 'react-router';
import { Provider } from 'react-redux';
import COMPONENTa from './ComponentA';
import COMPONENTb from './ComponentB';
import COMPONENTc './ComponentC';

class Root extends Component {

    render() {
        const { history } = this.props;
        return (
            <Router history={ history }>
                <Route path="/PATH/PATH/" component={ COMPONENTa }>
                    <IndexRoute component={ COMPONENTb } />
                    <Route path="PARAMS/:id" component={ COMPONENTc } />
                </Route>
            </Router>
        );
    }
}

Root.propTypes = {
    history: PropTypes.object.isRequired
};

edited Mar 2, 2016 at 12:22

answered Mar 2, 2016 at 11:51

Sagi Medina

9251 gold badge9 silver badges11 bronze badges

5 Comments

semira Over a year ago

" import React from 'react'; " not working in browser. I tried using requirejs also. but still problem is not solved.

Sagi Medina Over a year ago

This is just an example. It will work only if you use webpack and bible

semira Over a year ago

I am finding a way without using node.js

Sagi Medina Over a year ago

React has nothing to do with node.js. you can use it with any server you like

semira Over a year ago

ok. it is very helpful if you can exaplain me how to integrate react router to the app.

Collectives™ on Stack Overflow

React routing without node

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related