Блог

Главная - Вопросы по программированию - Как вы можете сделать два возврата в функциональном компоненте?

Как вы можете сделать два возврата в функциональном компоненте?

#reactjs

Вопрос:

У меня есть этот компонент, в котором я хочу отобразить некоторые компоненты с <Main /> маршрутом, но компонент входа в систему не должен быть связан с <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'


export default function App() {
  return (
          <Router>
      <Switch>
        <Main /> 
        <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>
  )
}
  return (
    <Router>
    <Route exact path="/login">
        <Login />
      </Route>
    </Router>
  );
  }

Комментарии:

1. Может быть только одно возвращение. Только первое будет иметь значение. На каком основании(условии) вы собираетесь показывать одно поверх другого?

2. тогда как вы можете показать main компонент во всех остальных компонентах, кроме login одного?

3. Проходим в реквизите. Или иметь переменную состояния. Основываясь на этом, напишите условие внутри вашей единственной функции возврата

Ответ №1:

Звучит как классический случай необходимости isLoggedIn переменной состояния bool, а затем проверки этого (троичный стиль или amp;amp;).

Комментарии:

1. нет, дело не в этом. Речь идет о рендеринге навигации во всех местах, кроме страницы входа в систему

Ответ №2:

Вам нужно выполнить визуализацию на основе аутентификации, если пользователь вошел в систему или нет. возвращение ( заверено ? (ваши маршруты здесь) : (ваш маршрут входа в систему) )

Метки: