Skip to content

Instantly share code, notes, and snippets.

@srezasm

srezasm/App.jsx

Last active September 13, 2020 10:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save srezasm/8f4b5dc5f5c7d1e362b83a503df3dc12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save srezasm/8f4b5dc5f5c7d1e362b83a503df3dc12 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. srezasm revised this gist Sep 13, 2020. 2 changed files with 16 additions and 27 deletions.
    35 changes: 13 additions & 22 deletions App.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,19 @@
    import React from 'react';
    import { BrowserRouter, Route, Link } from 'react-router-dom';
    const AskPage = React.lazy(() => import('./AskPage'));
    import React from "react";
    import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
    const AskPage = React.lazy(() => import("./AskPage"));

    const App = () => {
    return (
    <React.Fragment>
    <h1>Hello! this is HomePage</h1>
    <Link to="/ask">AskPage</Link>

    return (
    <BrowserRouter>
    <Route path="/ask">
    <React.Suspense
    fallback={
    <div style={{ marginTop: '100px', textAlign: 'center' }}>
    Loading...
    </div>
    }
    >
    <AskPage />
    </React.Suspense>
    </Route>
    <Link to="/ask">AskPage</Link>

    <Route exact path="/ask">
    <React.Suspense fallback={<div style={{ marginTop: "100px", textAlign: "center" }}>Loading...</div>}>
    <AskPage />
    </React.Suspense>
    </Route>
    </BrowserRouter>
    </React.Fragment>
    );
    );
    };

    export default App;
    export default App;
    8 changes: 3 additions & 5 deletions AskPage.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,5 @@
    import React from 'react';
    import React from "react";

    export const AskPage = () => {
    return <h1> This is AskPage </h1>;
    };
    export const AskPage = () => <h1> This is AskPage </h1>;

    export default AskPage;
    export default AskPage;
  2. srezasm created this gist Sep 13, 2020.
    28 changes: 28 additions & 0 deletions App.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    import React from 'react';
    import { BrowserRouter, Route, Link } from 'react-router-dom';
    const AskPage = React.lazy(() => import('./AskPage'));

    const App = () => {
    return (
    <React.Fragment>
    <h1>Hello! this is HomePage</h1>
    <Link to="/ask">AskPage</Link>

    <BrowserRouter>
    <Route path="/ask">
    <React.Suspense
    fallback={
    <div style={{ marginTop: '100px', textAlign: 'center' }}>
    Loading...
    </div>
    }
    >
    <AskPage />
    </React.Suspense>
    </Route>
    </BrowserRouter>
    </React.Fragment>
    );
    };

    export default App;
    7 changes: 7 additions & 0 deletions AskPage.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    import React from 'react';

    export const AskPage = () => {
    return <h1> This is AskPage </h1>;
    };

    export default AskPage;