Question

我有一个音乐应用程序，当我向人们发送新歌曲/专辑的电子邮件时，我想将其定向到歌曲/专辑页面（如果用户已登录），或者定向到登录/注册带有歌曲/专辑信息的页面。

我正在使用branch.io，并且在index.html中接收到深层链接参数，并将该数据全局保存到名为window._branch_的东西中。但是在我的App.jsx componentDidMount中，window._branch_是undefined。当用户打开链接时，我想将链接参数保存到redux，然后使用react-router进行重定向。该方案的正确流程/模式是什么？

index.html

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  <meta charset="utf-8">
  <!-- Make mobile compatible -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Music Player</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript">

      // load Branch
      (function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking getBrowserFingerprintId crossPlatformIds lastAttributedTouchData".split(" "), 0);

      let branchKeyTest = 'key_test_AAAAAAAAA'
      let branchKeyLive = 'key_live_BBBBBBBBB'

      branch.init(branchKeyTest, function(err, data) {
        // callback to handle err or data
        // bind branch to window so entire app can access branch data
        window.__BRANCH__ = data;
      });

    </script>
</body>

App.jsx

return (
    <Switch>
        <Route path="/authverify/:token" component={Login} />
        {/* Logged in forwards redirect */}
        {loggedIn && (
            <Redirect exact from="/" to={authRedirectTarget} />
        )}
        {/* Login */}
        <Route exact path="/" component={Login} />
        <Route path="/signup" component={Login} />
        <Route path="/signup-info/:token" component={Login} />
        {/* Non-auth redirect */}
        {!loggedIn && (
            <Redirect
                to={{ pathname: '/', state: { from: location } }} />
        )}
        <Route exact path="/releases" component={ReleasesView} />
        <Route path="/playlists/:id" component={PlaylistDetail} />
        <Route path="/playlists" component={Playlist} />
        <Route path="/flagged" component={Flagged} />
        <Route path="/archived" component={Archived} />
        <Route path="/recently_played" component={RecentlyPlayed} />
        <Route component={Fallback} />
    </Switch>
)

将数据存储到组件的componentDidMount中的redux

0 个答案: