Question

I m试图通过CDN印刷一个超文本页,把React和其他相关的Java文本装上,并用一些客户方的路线(目标是有一个文档微型网站)。然而,当我打开一页,去 Chrome子时,这是我得到的:

index.tsx:311 攻击类型 rror: Cannot读到未经界定的财产(翻新造物)

守则如下:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React</title>
  <script src="https://unpkg.com/history@5.3.0/umd/history.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/semantic-ui-react@2.1.4/dist/umd/semantic-ui-react.min.js" crossorigin></script>
  <script src="https://www.unpkg.com/react-router@6.11.0/dist/umd/react-router.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-router-dom@6.11.0/dist/umd/react-router-dom.production.min.js" crossorigin></script>
  <style type="text/css"></style>
  <script type="text/babel">
    var { StrictMode } = React;
    var { createBrowserHistory } = HistoryLibrary;
    var { BrowserRouter, Route, Routes } = ReactRouterDOM;

    var SomeStuff = (props) => {

        return (
            <div>
                Foo
            </div>
        );
    }

    var App = (props) => {
        return (
            <StrictMode>
                <BrowserRouter>
                    <SomeStuff />
                </BrowserRouter>
            </StrictMode>
        );
    };
    
    ReactDOM.render(App(), document.getElementById( place-app ));
  </script>
</head>

<body>
  <div id="place-app"></div>
</body>
</html>

欢迎任何帮助!

Answer 1

Looks like you need to replace the reference to HistoryLibrary with history. If you are using React Router v6, you don t need createBrowserHistory’. React Router v6 uses browser history by default with BrowserRouter`.

法典:

 <!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/semantic-ui-react@2.1.4/dist/umd/semantic-ui-react.min.js" crossorigin></script>
    <script src="https://www.unpkg.com/react-router@6.11.0/dist/umd/react-router.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-router-dom@6.11.0/dist/umd/react-router-dom.production.min.js" crossorigin></script>
    <style type="text/css"></style>
    <script type="text/babel">
        const { StrictMode } = React;
        const { BrowserRouter, Routes, Route } = ReactRouterDOM;

        const SomeStuff = (props) => {
            return (
                <div>
                    Foo
                </div>
            );
        }

        const App = () => {
            return (
                <StrictMode>
                    <BrowserRouter>
                        <Routes>
                            <Route path="/" element={<SomeStuff />} />
                        </Routes>
                    </BrowserRouter>
                </StrictMode>
            );
        };
        
        ReactDOM.render(<App />, document.getElementById( place-app ));
    </script>
</head>

<body>
    <div id="place-app"></div>
</body>
</html>

最新情况:路线和路线在贵文本中有所不同!

友情链接