相关疑难解决方法(0)

如何使用react-router v4重定向到绝对路径?

我有一个庞大的Django网络应用程序,其中的一个模块(“仪表板”)用node和react编写。用户登录由Django模块处理。

用户应该登录到主应用程序才能访问react仪表板,并且它部分起作用-代码从浏览器获取用户会话,并且仅在存在的情况下呈现内容。

我现在想在没有会话的情况下将用户重定向到应用主登录页面,但是我不知道如何使用当前结构(和该血腥的v4路由器)进行操作。

我在BrowserRouter组件中使用基本名称来使用相对于django应用程序中的仪表板路径的路由。

这是我为app.jsx的JSX想到的:

<BrowserRouter basename='/en/dashboard'>
    {this.state.isAuthenticated ? (
        <Paper zDepth={0} style={{ height: '100%', backgroundColor: grey900 }}>
            <div style={{height: '100%'}}>
                <Header />
                <Switch>
                    <Route exact={true} path='/' component={FirstSection}/>
                    <Route path='/first' component={FirstSection}/>
                    <Route path='/second' component={SecondSection}/>
                </Switch>
            </div>
        </Paper>
    ) : (
        <Redirect to="/en/login"/>
    )}
</BrowserRouter>
Run Code Online (Sandbox Code Playgroud)

但是,它实际上重定向到en/dashboard/en/login。我相信我可以从BrowserRouter中删除'basename'属性,并将其添加到每个后续Route中,但是如果此模块最终变得更大,它将使路由更难。有一个更好的方法吗?

reactjs react-router-v4

5
推荐指数
1
解决办法
6111
查看次数

在 React 中打开带有函数的外部链接

我正在尝试在 React 中创建一个按钮,它会打开一个指向谷歌地图 url 的外部链接。

我有一个功能,它要求用户提供他们的地理位置,一旦提供,将位置输入到 url 链接中,该链接获取从他们的地理位置到设定目的地的方向。

但是,我正在努力让按钮首先运行该功能并在新选项卡中打开 URL 。这就是我目前调用按钮组件的方式。

<Button variant="primary" onClick={this.onHandleClick}>Get Google Maps Directions</Button>
Run Code Online (Sandbox Code Playgroud)

这就是形成和打开链接的功能。

  onHandleClick = () => {
    var location = this.state.currentLocation;

    location.then(function(location){
      var link = `google.com/maps/dir/?api=1&origin=${location}&destination=50.927044,-1.299964&travelmode=driving`      

      //window.location.href = link;
      window.location.assign(link);
    })
  }

Run Code Online (Sandbox Code Playgroud)

目前外部链接格式正确,但附加到 url 中现有的 localhost 域,因此当前未打开(或在新选项卡中)。

以上函数的url结果:

http://localhost:3000/google.com/maps/dir/?api=1&origin=50.4984,%20-2.6119074&destination=50.927044,-1.299964&travelmode=driving

我在调用组件时尝试过设置 target="_blank"。

任何帮助将不胜感激!

谢谢,马克斯

javascript url routes reactjs

5
推荐指数
1
解决办法
4482
查看次数

标签 统计

reactjs ×2

javascript ×1

react-router-v4 ×1

routes ×1

url ×1