Javascript 通过CDN使用带react的路由器_Javascript_Reactjs_React Router_Babeljs_Cdn

Javascript 通过CDN使用带react的路由器

javascript reactjs

Javascript 通过CDN使用带react的路由器,javascript,reactjs,react-router,babeljs,cdn,Javascript,Reactjs,React Router,Babeljs,Cdn,我有以下代码： <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/r

我有以下代码：

<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>

和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")
)

const Component=React.Component；
常量MyApp=（）=>(
);
常量头=（）=>{
返回(
);
}
ReactDOM.render(
,
document.getElementById（“根”）
)

这很有效

但是，当我尝试添加路由器时：

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>
        )
    }
};

const Component=React.Component，
BrowserRouter=ReactRouter.BrowserRouter，
Route=路由器路由；
导出类MyApp扩展组件{
render（）{
返回(
)
}
};

我明白了：

未捕获引用错误：未定义导出

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)

at:3:23
运行时（babel.js:61531）
检查时（babel.js:61597）
巴别塔：61624
位于XMLHttpRequest.xhr.onreadystatechange（babel.js:61549）

我发现Babel、exports和Typescript都有问题，但我不会在任何地方使用最后一个。我真的需要使用路由器，但我找不到解决方案，我还尝试更改CDN的版本，但没有成功。

您知道您已将render拼写为redner，对吗？谢谢，我将对其进行编辑，但我已测试过，这不是问题所在。我发现这个例子对我很有用，非常感谢。