1

I want to create a multi page react app using react router without using node js. I created an index.html file and app.js file. My files are as follows:

index.html

<head>
    <title>React Demo</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.js"></script>
    <script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
    <script src="https://unpkg.com/history/umd/history.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="http://cdn.auth0.com/js/auth0/8.5/auth0.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script src="app.js" type="text/babel"></script>
 </body>

app.js

let ReactRouter = window.ReactRouter
let Router = ReactRouter.Router
let IndexRoute = ReactRouter.IndexRoute
let Route = ReactRouter.Route
let Link = ReactRouter.Link
let Redirect = ReactRouter.Redirect
let History = window.History
let browserHistory = History.createBrowserHistory()

class HomePage extends React.Component{
    render() {
      return (
        <div>
            <h1>Hello World!</h1>
            <span><a href="dashboard">Go Dashboard</a></span>
        </div>
      );
    }
}

class Dashboard extends React.Component{
    render() {
      return (
        <div>
            <h1>Hello Dashboard!</h1>
        </div>
      );
    }
}

class NotFoundPage extends React.Component{
    render() {
      return (
        <div>
            <h1>The page you looking for was not found!</h1>
        </div>
      );
    }
}

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={HomePage}>
           <Route path="dashboard" component={Dashboard}></Route>
        </Route>
    </Router>
, document.getElementById('root'));

when I run the app in browser http://localhost/demo-app/ than HomePage component called.

But When I Open the http://localhost/demo-app/dashboard than it shows 404 object not found error.

enter image description here

I want to create app without node and npm. I searched on web for the solution but I didn't find any working solution for react router for cdn url apps.

Am I missing something? or I need some other router libs for react to work?

Amit Kumar
  • 2,141
  • 1
  • 11
  • 13
  • Set up your Apache server to serve index.html on 404 – elmeister Apr 19 '17 at 11:02
  • Possible duplicate of [React-router urls don't work when refreshing or writting manually](http://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually) – Fabian Schultz Apr 19 '17 at 11:27
  • hey @FabianSchultz, thanks for review my question. I reviewed the link you shared. It is about how the page refresh works with react router but I am facing problem with all route pages without page refresh or by going to particular url and also this solution uses node js but I don't want to use node js for doing this. – Amit Kumar Apr 19 '17 at 11:45
  • There are several solutions in the answers, also ones where you only need a `.htaccess` file. It's the same problem as you have. If you would use `Go Dashboard` instead of `Go Dashboard` it should work for client side transitions. – Fabian Schultz Apr 19 '17 at 11:56
  • I added a .htaccess file and changed link but this time url is changed with /dashboard but content remains same. htaccess code is : RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_METHOD} !OPTIONS RewriteRule ^(.*)$ index.html [L] – Amit Kumar Apr 19 '17 at 12:04

1 Answers1

0

You simply need a http server that supports redirecting not found pages to index.html

You can do this with many solutions:

  • Apache or any other reverse proxy
  • Custom software solution (including node-based tools like serve)
  • Webpack with dev serve embeds a file serving solution capable of redirecting (see)

In any way, you absolutly need the backend (part that receives the http request) to support redirecting your url to the index.html page. As you don't explain how you currently serve your files on localhost, it's impossible to help you more.

Community
  • 1
  • 1
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • I created a .htaccess file to my app root folder which redirects all pages to index.html for now the url working when I go to /dashboard link but content remains or loaded same as home page content. – Amit Kumar Apr 19 '17 at 12:09
  • You can easily handle your problems with Apache: http://stackoverflow.com/a/32150846/82609 – Sebastien Lorber Apr 19 '17 at 12:13
  • I added the added the .htaccess code to my app root directory but it is not working, it's giving 404 error on /dashboard page. – Amit Kumar Apr 19 '17 at 12:21
  • I added below new htaccess code to my htaccess file and the url working now but content loads same as home page on dashboard page also. `RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_METHOD} !OPTIONS RewriteRule ^(.*)$ index.html [L] ` – Amit Kumar Apr 19 '17 at 12:23