Skip to content

Routing

Jump to bottom
ReactMVC edited this page Jul 2, 2023 · 6 revisions

Important note.

If you build a router with Elroid, add these so that when https://copy.reactmvc.ir/about is refreshed, you will not get a 404 error.

For Apache

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [L,QSA]

For Nginx

location / {
    try_files $uri $uri/ /index.html;
}

Apache in the .htaccess file and Nginx in the nginx.conf file

Simple Route

index.html

<!DOCTYPE html>
<html>

<head>
    <title>My App</title>
</head>

<body>
    <div id="app"></div>

    <script src="Elroid.js"></script>
    <script src="App.js"></script>
</body>

</html>

App.js

class HomeComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
          <div>
            <h1>Welcome to the Home Page</h1>
            <p>Click the links in the navigation bar to go to other pages.</p>
          </div>
        `,
            data: {}
        });
    }
}

const router = new ElRouter({
    routes: [
        { route: '/', component: HomeComponent },
    ],
    defaultRoute: '/',
});

Multiple Route

index.html

<!DOCTYPE html>
<html>

<head>
    <title>My App</title>
</head>

<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <div id="app"></div>

    <script src="Elroid.js"></script>
    <script src="App.js"></script>
</body>

</html>

App.js

class HomeComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
        <div>
          <h1>Welcome to the Home Page</h1>
          <p>Click the links in the navigation bar to go to other pages.</p>
        </div>
      `,
            data: {}
        });
    }
}

class AboutComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
        <div>
          <h1>About Us</h1>
          <p>We are a company that specializes in creating web applications.</p>
          <p>my name is: {{name}}</p>
        </div>
      `,
            data: { name: "Hossein" }
        });
    }
}

const router = new ElRouter({
    routes: [
        { route: '/', component: HomeComponent },
        { route: '/about', component: AboutComponent },
    ],
    defaultRoute: '/',
});

Custom 404 page

class HomeComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
        <div>
          <h1>Welcome to the Home Page</h1>
          <p>Click the links in the navigation bar to go to other pages.</p>
        </div>
      `,
            data: {}
        });
    }
}

class AboutComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
        <div>
          <h1>About Us</h1>
          <p>We are a company that specializes in creating web applications.</p>
        </div>
      `,
            data: {}
        });
    }
}

class NotFoundComponent extends ElComponent {
    constructor() {
        super({
            el: '#app',
            template: `
        <div>
          <h1>404 - Page Not Found</h1>
          <p>The page you are looking for could not be found.</p>
        </div>
      `,
            data: {}
        });
    }
}

const router = new ElRouter({
    routes: [
        { route: '/', component: HomeComponent },
        { route: '/about', component: AboutComponent },
        { route: '/404', component: NotFoundComponent },
    ],
    defaultRoute: '/',
    errorRoute: '/404',
});

Next: HTTP Request

Clone this wiki locally