Reactjs 如何将azure广告令牌从url获取到react中的组件？

我有一个react应用程序，带有Azure广告的用户流管理系统。我正在单击按钮调用Azure广告url以访问登录页面。输入数据后，我点击签名按钮，得到如下url

localhost:3000/#id_令牌=xxxxxxxxx

加载页面显示“此站点无法提供安全连接。Localhost发送了无效响应。”

问题是如何将此令牌发送到我的react组件，通过jwt decode对其进行解码，然后执行其余操作？我尝试创建一个如下的路由来捕获url，但该组件从未显示。仍在加载带有令牌url的错误页面

<Route path='/#id_token=' component={TokenComponent} />

这是我的密码

Signin.js

class Signin extends Component {
    render() {
        return (
            <Link to='/azureUrl'>Go to Azure</Link>
        )
    }
}

render(
    <AppProvider>
      <BrowserRouter>
        <Switch>
          <Route path='/#id_token=' component={TokenComponent} />
          <Route path='/azureUrl' component={() => { 
               window.location.href='http://XXX.b2clogin.com/XXXXXXXXXXXX'
               return null
          }} />
        </Switch>
      </BrowserRouter>
    </AppProvider>
)

类签名扩展组件{
render（）{
返回(
转到Azure
)
}
}

index.js

class Signin extends Component {
    render() {
        return (
            <Link to='/azureUrl'>Go to Azure</Link>
        )
    }
}

render(
    <AppProvider>
      <BrowserRouter>
        <Switch>
          <Route path='/#id_token=' component={TokenComponent} />
          <Route path='/azureUrl' component={() => { 
               window.location.href='http://XXX.b2clogin.com/XXXXXXXXXXXX'
               return null
          }} />
        </Switch>
      </BrowserRouter>
    </AppProvider>
)

渲染(
{ 
window.location.href=http://XXX.b2clogin.com/XXXXXXXXXXXX'
返回空
}} />
)