Using router with react by CDN

Viewed 727

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.

0 Answers
Related