Question

我有此代码：

<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,
BrowserRouter = ReactRouter.BrowserRouter,
Route = ReactRouter.Route;

export class MyApp extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Header}/>
                </div>
            </BrowserRouter>
        )
    }
};

我明白了：

未捕获的ReferenceError：未定义导出

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)

我看到Babel，导出和Typescript出现了问题，但我没有在任何地方使用最后一个。我确实需要使用Router，但找不到解决方案，我也尝试更改CDN的版本，但没有用。

将路由器与CDN一起使用

0 个答案: