Using router with react by CDN

up vote
3
down vote

favorite

I have this code:

<body>

  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.js"></script>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>



  <script src="index.js" type="text/babel"></script>

</body>

And javascript:

const Component = React.Component;



const MyApp = () => (

        <div>

            <Header></Header>

        </div>

);



const Header = () => {

    return (

        <div className="Header">

            <img className="banner_image" src="www/banner.jpg"></img>

        </div>

    );

}



ReactDOM.render(

    <MyApp />,

    document.getElementById("root")

)

which works pretty well.

But, when I try to add a Router:

const Component = React.Component,

BrowserRouter = ReactRouter.BrowserRouter,

Route = ReactRouter.Route;



export class MyApp extends Component {

    render() {

        return (

            <BrowserRouter>

                <div>

                    <Route exact path="/" component={Header}/>

                </div>

            </BrowserRouter>

        )

    }

};

I get this:

Uncaught ReferenceError: exports is not defined

at <anonymous>:3:23

at run (babel.js:61531)

at check (babel.js:61597)

at babel.js:61624

at XMLHttpRequest.xhr.onreadystatechange (babel.js:61549)

I saw it was a problem with Babel, exports, and Typescript but I'm not using this last one anywhere. I really need to use Router but I can't find a solution to this, I also tried to change the versions of my CDN but it didn't work.

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

You know you have spelt render as redner right?
– Sparlarva
Nov 17 at 18:22

Thanks, I'm going to edit that, but I tested and it wasn't the issue.
– Quentin Ellak
Nov 17 at 18:24

1

codepen.io/lsmoura/pen/pNPOzp working example which i found
– victor zadorozhnyy
Nov 17 at 18:26

This example works for me, thank you a lot.
– Quentin Ellak
Nov 17 at 18:35

add a comment |

up vote
3
down vote

favorite

I have this code:

<body>

  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.js"></script>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>



  <script src="index.js" type="text/babel"></script>

</body>

And javascript:

const Component = React.Component;



const MyApp = () => (

        <div>

            <Header></Header>

        </div>

);



const Header = () => {

    return (

        <div className="Header">

            <img className="banner_image" src="www/banner.jpg"></img>

        </div>

    );

}



ReactDOM.render(

    <MyApp />,

    document.getElementById("root")

)

which works pretty well.

But, when I try to add a Router:

const Component = React.Component,

BrowserRouter = ReactRouter.BrowserRouter,

Route = ReactRouter.Route;



export class MyApp extends Component {

    render() {

        return (

            <BrowserRouter>

                <div>

                    <Route exact path="/" component={Header}/>

                </div>

            </BrowserRouter>

        )

    }

};

I get this:

Uncaught ReferenceError: exports is not defined

at <anonymous>:3:23

at run (babel.js:61531)

at check (babel.js:61597)

at babel.js:61624

at XMLHttpRequest.xhr.onreadystatechange (babel.js:61549)

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

You know you have spelt render as redner right?
– Sparlarva
Nov 17 at 18:22

Thanks, I'm going to edit that, but I tested and it wasn't the issue.
– Quentin Ellak
Nov 17 at 18:24

1

codepen.io/lsmoura/pen/pNPOzp working example which i found
– victor zadorozhnyy
Nov 17 at 18:26

This example works for me, thank you a lot.
– Quentin Ellak
Nov 17 at 18:35

add a comment |

up vote
3
down vote

favorite

I have this code:

<body>

  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.js"></script>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>



  <script src="index.js" type="text/babel"></script>

</body>

And javascript:

const Component = React.Component;



const MyApp = () => (

        <div>

            <Header></Header>

        </div>

);



const Header = () => {

    return (

        <div className="Header">

            <img className="banner_image" src="www/banner.jpg"></img>

        </div>

    );

}



ReactDOM.render(

    <MyApp />,

    document.getElementById("root")

)

which works pretty well.

But, when I try to add a Router:

const Component = React.Component,

BrowserRouter = ReactRouter.BrowserRouter,

Route = ReactRouter.Route;



export class MyApp extends Component {

    render() {

        return (

            <BrowserRouter>

                <div>

                    <Route exact path="/" component={Header}/>

                </div>

            </BrowserRouter>

        )

    }

};

I get this:

Uncaught ReferenceError: exports is not defined

at <anonymous>:3:23

at run (babel.js:61531)

at check (babel.js:61597)

at babel.js:61624

at XMLHttpRequest.xhr.onreadystatechange (babel.js:61549)

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

I have this code:

<body>

  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.js"></script>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>



  <script src="index.js" type="text/babel"></script>

</body>

And javascript:

const Component = React.Component;



const MyApp = () => (

        <div>

            <Header></Header>

        </div>

);



const Header = () => {

    return (

        <div className="Header">

            <img className="banner_image" src="www/banner.jpg"></img>

        </div>

    );

}



ReactDOM.render(

    <MyApp />,

    document.getElementById("root")

)

which works pretty well.

But, when I try to add a Router:

const Component = React.Component,

BrowserRouter = ReactRouter.BrowserRouter,

Route = ReactRouter.Route;



export class MyApp extends Component {

    render() {

        return (

            <BrowserRouter>

                <div>

                    <Route exact path="/" component={Header}/>

                </div>

            </BrowserRouter>

        )

    }

};

I get this:

Uncaught ReferenceError: exports is not defined

at <anonymous>:3:23

at run (babel.js:61531)

at check (babel.js:61597)

at babel.js:61624

at XMLHttpRequest.xhr.onreadystatechange (babel.js:61549)

javascript reactjs react-router babeljs cdn

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

edited Nov 18 at 0:13

Eugene Mihaylin

9171324

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

asked Nov 17 at 18:01

Quentin Ellak

1,6252615

You know you have spelt render as redner right?
– Sparlarva
Nov 17 at 18:22

Thanks, I'm going to edit that, but I tested and it wasn't the issue.
– Quentin Ellak
Nov 17 at 18:24

1

codepen.io/lsmoura/pen/pNPOzp working example which i found
– victor zadorozhnyy
Nov 17 at 18:26

This example works for me, thank you a lot.
– Quentin Ellak
Nov 17 at 18:35

add a comment |

You know you have spelt render as redner right?
– Sparlarva
Nov 17 at 18:22

Thanks, I'm going to edit that, but I tested and it wasn't the issue.
– Quentin Ellak
Nov 17 at 18:24

1

codepen.io/lsmoura/pen/pNPOzp working example which i found
– victor zadorozhnyy
Nov 17 at 18:26

This example works for me, thank you a lot.
– Quentin Ellak
Nov 17 at 18:35

You know you have spelt render as redner right?
– Sparlarva
Nov 17 at 18:22

Thanks, I'm going to edit that, but I tested and it wasn't the issue.
– Quentin Ellak
Nov 17 at 18:24

codepen.io/lsmoura/pen/pNPOzp working example which i found
– victor zadorozhnyy
Nov 17 at 18:26

This example works for me, thank you a lot.
– Quentin Ellak
Nov 17 at 18:35

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53354021%2fusing-router-with-react-by-cdn%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk