时间戳

首页 > 解决方案 > 主要组件未在反应路由中呈现

reactjs - 主要组件未在反应路由中呈现

问题描述

我有这段代码，我想<Main />在除登录和注册页面之外的所有部分呈现组件。我设置了一个 window.location.pathname 来检测路径名，如果它是注册或登录页面，则不呈现任何内容。但问题是该<Main />组件也没有在任何组件中呈现。

import './App.css';
import './index.css'
import App from './App'
import Main from './main.js'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} 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'
import { useAuth0 } from "@auth0/auth0-react";
import Register from './register.js'



export default function MainApp() {

  let HideHeader = window.location.pathname === '/login' || '/register' ? null : <Main />

  return (
        <Router>
           {HideHeader}     
      <Switch>
      <Route exact path="/login">
          <Login />
        </Route>
        <Route exact path="/register">
          <Register />
        </Route>
        <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>    
      </Router>
  )
  }

标签： reactjs

解决方案

当 url 路径与路由匹配时，Route 组件接受要渲染的子级。你为什么不把你的<Main />组件包含在你希望它被渲染的路由中呢？您只需要重组渲染部分。例如：

    <Route exact path="/dashboard">
      <>
        <Main />
        <Dashboard />
      </>
    </Route>

推荐阅读