Question

我需要维护我的应用程序中可用于所有页面的部分（实际上大部分页面）为此，我将路线包裹在布局中

<Router>
    <Route path="/login" exact strict component={Login}/>
    <Layout>
        <Route path="/list" exact strict component={List}/>
        <Route path="/settings" exact strict component={Settings}/>
    </Layout>
</Router>

布局组件看起来像这样

class Layout extends Component {
    render() {
        return (
            <React.Fragment>
                <div>this box should be visible in all pages using layout</div>
                <div>{this.props.children}</div>
            </React.Fragment>
        )
    }
}

这工作正常。唯一的问题是当我去/ login时正在渲染“登录”组件以及“布局”组件。

如果不是针对“受保护”路线之一，则不应渲染该布局。有没有一种方法可以在不移动“设置列表”组件内部的布局的情况下实现此目的？这样做的原因是，所有页面上固定的框都发出一个API请求，而无需对/ list和/ settings进行相同的API调用。我只做一次。

希望这对您有意义。谢谢！

更新： “ react-router-dom”：“ ^ 5.0.1”

Answer 1

我对此主题做了相当多的研究，并提出了这个建议。我已经在路线中设置了它：

if (driver.findElement(By.xpath("//input[@value='Continue to Payment']")).isDisplayed()){ 
           driver.findElement(By.xpath("//input[@value='Continue to Payment']")).click();
    }

else if (driver.findElement(By.xpath("//input[@value='Paiement']")).isDisplayed()){           
        driver.findElement(By.xpath("//input[@value='Paiement']")).click();
    }

else if ( same thing as above but for another language)

然后在我的privateRoute.js中：

no such element: Unable to locate element:{"method":"xpath","selector":"//a[contains(text(),'Checkout')]"}

和我的publicRoute.js类似，但没有身份验证。我的布局是一个简单的包装，您所需要做的就是包含子代：

import React from 'react'
import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
// import PublicRoute, PrivateRoute, Login, Private
<Router>
  <Switch>
    <PublicRoute exact path='/login' component={Login} />
    <PrivateRoute path='/private' component={Private} />
  </Switch>
<Router>

注意：对于那些不认识import React from 'react' import { Redirect, Route } from 'react-router-dom' // import useAuth and PrivateLayout export default ({ componet: Component, ...rest }) => { const { token } = useAuth() // wrapper I wrote to handle auth if (!token) return <Redirect to='/login' /> return ( <Route {...rest} render={props => ( <PrivateLayout><Component {...props} /></PrivateLayout> )} /> ) }的人来说，export default ({ children }) => { return ( <> <Topbar /> <Sidebar /> {children} </> )的简写。

在React

1 个答案: