如何在React函数组件中写两个return实现Login路由不套用<Main />布局

现有代码问题 #

• 语法错误：React函数组件仅能执行第一个return语句，你写的第二个登录路由相关return永远不会触发，同时代码存在组件闭合标签不匹配、重复导入App组件导致循环引用的问题。
• 逻辑错误：直接将<Main />放在<Switch>下，会导致所有路由都会强制渲染Main布局，无法实现登录页排除的需求。

修复后可运行代码（适配你当前使用的react-router-dom v5版本） #

import './App.css';
import './index.css'
import Main from './main.js'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import Dashboard from './dashboard.js'
import Clients from './Clients.js'
import AddClient from './clientform.js'
import EditClient from './editclient.js'
import Landing from './landing.js'
import AddDiet from './addDiet.js'
import CalendarSection from './calendar.js'
import Login from './login.js'

export default function App() {
  return (
    <Router>
      <Switch>
        {/* 登录路由不使用Main布局 */}
        <Route exact path="/login">
          <Login />
        </Route>
        {/* 其余路由统一套用Main布局 */}
        <Route path="/">
          <Main>
            <Switch>
              <Route exact path="/dashboard">
                <Dashboard />
              </Route>
              <Route exact path="/Clients">
                <Clients />
              </Route>
              <Route exact path="/addClient">
                <AddClient />
              </Route>
              <Route exact path="/Calendar">
                <CalendarSection />
              </Route>
              <Route exact path="/Clients/:id">
                <EditClient />
              </Route>
              <Route exact path="/Clients/:id/addDiet">
                <AddDiet />
              </Route>
            </Switch>
          </Main>
        </Route>
      </Switch>
    </Router>
  )
}

额外调整说明 #

你需要修改Main组件的代码，在你想要显示子页面内容的位置，添加{props.children}用于渲染嵌套的子路由内容，示例如下：

// Main.js 示例代码
export default function Main(props) {
  return (
    <div className="main-layout">
      {/* 这里是你的公共布局代码，比如侧边栏、顶部导航等 */}
      <aside>侧边栏导航</aside>
      <header>顶部导航</header>
      {/* 子页面内容渲染位 */}
      <main className="content">
        {props.children}
      </main>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Chen