CODEWITHSUNDEEP
reactjsreact-router
Lorenzo Piccoli Módolo
Lorenzo Piccoli Módolo

Reputation: 454

How to setup a website using react-routes

I've been trying to learn React and React-router these days and I'm lost. I've read a lot about how to use react-router, read all their docs, but I can't connect the dots yet. I'm trying to setup a website with Home, Login and About pages, there should be a parent navBar. I have a server running express and I want to be able to change the Home content if the user is logged in or not. I'm serving static files for now, so there should be a index.html, about.html and login.html? I've tried everything with server side rendering (not sure if it's the right way to go), but all the tutorials are outdated and the docs seems to not connect well.

I know should have an App.js file, a routes.js and a client-side.js. Here's what I have:

App.js

var React = require('react');
var socket = require("socket.io-client")("http://localhost:3000");

var Login = require('./Login');
var NavBar = require('./NavigationBar');
var About = require('./About');


module.exports = React.createClass({
    render: function(){
        return (
            <div>
                <NavBar />
                <Login /> --> I should put something related to routing here? The right component for the url the user typed?
            </div>
            );
    },
});

client-side.js

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./react/App');

ReactDOM.render(<App />, document.getElementById("react-container"));

app-server.js

var express = require("express");
var http = require('http');
var app = express();
var server = http.createServer(app).listen(3000);
var io = require('socket.io').listen(server);

app.use(express.static(__dirname + "/public"));
console.log("Server listening on http://localhost:3000");

io.on('connection', function(socket){
    console.log("Connected to Socket.io with id: %s", socket.id);
});

module.exports = server;

I've tried a LOT of things, but it can't be that hard... I just want to have a router and be able to have access to what page the user is trying to access on the server...

Upvotes: 1

Views: 212

Answers (1)

Lorenzo Piccoli M&#243;dolo
Lorenzo Piccoli M&#243;dolo

Reputation: 454

Found the solution:

app-server.js: Added this

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
});

routes.js: Added

import React from 'react';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import { createHistory, useBasename } from 'history'
import App from './App';
import Login from './Login';
import About from './About';

//Removes /#/k_adarwf
const history = useBasename(createHistory)({
    basename: '/'
});

    module.exports =  (<Router history={history} >
                        <Route path="/" component={App}>
                          <IndexRoute component={Login} />
                          <Route path="about" component={About} />
                        </Route>
                      </Router>);

App.js: Changed to

module.exports = React.createClass({
    render: function(){
        return (
            <div>
                <NavBar />
                {this.props.children}
            </div>
            );
    },
});

Upvotes: 2

Related Questions