web-dev-qa-db-ja.com

React Router with CDNを使用し、webpackまたはbrowserifyを使用しない

再開：wepbackまたは同様のツールなしでReact Routerを実行する必要があります。CDNリンクから直接実行しましたが、require.jsエラーが発生しています。

私はReactで最初のアプリを構築し始めており、Reactルーターで苦労しています。

HTML：

<body>
    <div id="container"></div>


    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

    <script src="https://npmcdn.com/[email protected]/umd/ReactRouter.js"></script>

    <script type="text/babel" src="assets/scripts/03_templates/app.js" charset="utf-8"></script>

</body>

JS：

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

//some classes 

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={Window}>
            <IndexRoute component={InitialPage}/>
            <Route path="register" component={Register} />
            <Route path="search" component={Search} />
        </Route>
    </Router>
), document.getElementById("container"));

すべて正常に動作していますが、コンソールでこれを取得します。

react.js：3639警告：getComponentのIndexRouteプロップのReact.PropTypes検証関数を手動で呼び出しています。これは非推奨であり、次のメジャーバージョンの本番環境では機能しません。サードパーティのPropTypesライブラリが原因で、この警告が表示される場合があります。

したがって、私の反応ルーターは古いバージョンだと思います。リンクを

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

警告：React.createElement：タイプはnull、未定義、ブール、または数値であってはなりません。文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）である必要があります。

私はそれについて検索しましたが、問題は1行目にあるようです。そのため、これを変更しました。

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

これに：

import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';

そして今、私はこの問題を抱えています：

app.js：2 Uncaught ReferenceError：requireが定義されていません

Require.jsを検索し、いくつか試しましたが、問題は何も修正されませんでした。何が欠けていますか？これをwebpackや類似のツールなしで実行する必要があります。

ありがとう

javascriptreactjsrequirejsreact-routercdn
15
sandrina-p

あなたのJavaScriptの上にこれを使用してください：

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;

importステートメントを削除します。

私は現在、このreact-routerパッケージを使用しています：https://unpkg.com/[email protected]/umd/ReactRouter.js

編集：

以下は、CodePenの例です。 http://codepen.io/lsmoura/pen/pNPOzp -インポートステートメントを使用しません。

7
Sergio Moura

反応ルートv4.0については、お読みください react-routerパッケージ ページに2つのjsリンクを追加：

<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

あなたが使用できるjsコードでは：

const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Prompt =  window.ReactRouterDOM.Prompt;
const Switch = window.ReactRouterDOM.Switch;
const Redirect = window.ReactRouterDOM.Redirect;

また、使用できます

console.log(window.ReactRouterDOM);

次のようなすべてのオブジェクトを出力するには：

ReactRouteDOMオブジェクト

16
billschen

これを実現する方法の最小限の例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      const Link = ReactRouterDOM.Link,
            Route = ReactRouterDOM.Route;

      const App = props => (
        <ReactRouterDOM.HashRouter>
          <ul>
            <li><Link to="/">TO HOME</Link></li>
            <li><Link to="/a">TO A</Link></li>
            <li><Link to="/b">TO B</Link></li>
          </ul>

          <Route path="/" exact component={Home} />
          <Route path="/a" component={A} />
          <Route path="/b" component={B} />
        </ReactRouterDOM.HashRouter>
      )

      const Home = props => <h1>HOME</h1>
      const A = props => <h1>A</h1>
      const B = props => <h1>B</h1>

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>
1
duhaime