Reactjs 对React中的某些管线使用布局

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

<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>
        )
    }
}

类布局扩展组件{
render（）{
返回(
此框应在使用布局的所有页面中可见
{this.props.children}
)
}
}

这工作做得很好。唯一的问题是当我转到/登录时 正在呈现登录组件和布局组件

如果不是为其中一个受保护的路由，我不应该呈现布局。 有没有一种方法可以在不移动设置列表组件内部布局的情况下实现这一点？ 这样做的原因是，所有页面中固定的框都会发出一个API请求，而不需要对/list和/settings执行相同的API调用。我只做一次

希望这对你有意义。谢谢大家!

更新：

---

“react router dom”：“^5.0.1”

我对这个主题做了大量的研究，并提出了这个建议。我在我的路线中设置了它：

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>

从“React”导入React
从“react Router dom”导入{BrowserRouter as Router，Redirect，Route，Switch}
//导入PublicRoute、PrivateRoute、登录、Private

然后在我的privaterout.js中：

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>
    )} />
  )
}

从“React”导入React
从“react router dom”导入{Redirect，Route}
//导入useAuth和PrivateLayout
导出默认值（{componet:Component，…rest}）=>{
const{token}=useAuth（）//我为处理auth而编写的包装器
如果（！令牌）返回
返回(
(
)} />
)
}

我的publicRoute.js与之类似，但没有身份验证。我的布局是一个简单的包装器，您只需包含子级：

export default ({ children }) => {
  return (
    <>
      <Topbar />
      <Sidebar />
      {children}
    </>
  )

导出默认值（{children}）=>{
返回(
{儿童}
)

---

注意：对于那些不知道

是

的缩写的人，我对这个主题做了大量的研究，并得出了这个结论。我在我的路线中设置了它：

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>

从“React”导入React
从“react Router dom”导入{BrowserRouter as Router，Redirect，Route，Switch}
//导入PublicRoute、PrivateRoute、登录、Private

然后在我的privaterout.js中：

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>
    )} />
  )
}

从“React”导入React
从“react router dom”导入{Redirect，Route}
//导入useAuth和PrivateLayout
导出默认值（{componet:Component，…rest}）=>{
const{token}=useAuth（）//我为处理auth而编写的包装器
如果（！令牌）返回
返回(
(
)} />
)
}

我的publicRoute.js与之类似，但没有身份验证。我的布局是一个简单的包装器，您只需包含子级：

export default ({ children }) => {
  return (
    <>
      <Topbar />
      <Sidebar />
      {children}
    </>
  )

导出默认值（{children}）=>{
返回(
{儿童}
)

---

注意：对于那些不知道的人来说，

是

你使用的是哪个版本的react路由器？我不确定，但是可以在这里切换帮助吗？如果你使用的是react路由器。是的，它的版本会有帮助。据我所知，

切换

应该在

/login

上停止。我正在使用反应路由器dom“^5.0.1”谢谢！我也使用react router dom，下面的答案很好。在我的情况下，路由是布局的子级。您使用哪一版本的react router？我不确定，但可以在这里切换帮助？如果您使用react router，当然可以。是的，它的版本可能会有帮助。据我所知，
切换
应该在
/l上停止ogin
。我使用的是“react router dom”：“^5.0.1”谢谢！我也使用react router dom，下面的答案非常有效。在我的情况下，路由是布局的子级。