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?

5
  • Set up your Apache server to serve index.html on 404 Commented Apr 19, 2017 at 11:02
  • Possible duplicate of React-router urls don't work when refreshing or writting manually Commented Apr 19, 2017 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. Commented Apr 19, 2017 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 <Link to="dashboard">Go Dashboard</Link> instead of <a href="dashboard">Go Dashboard</a> it should work for client side transitions. Commented Apr 19, 2017 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] Commented Apr 19, 2017 at 12:04

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

4 Comments

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.
You can easily handle your problems with Apache: stackoverflow.com/a/32150846/82609
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.
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]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.