0

我有点新反应我想知道当我通过身份验证时如何使用另一个 CSS 类

这就是我试图解决问题的方法

<section className={store.getState().auth.isAuthenticated ?"container2":"container"}>

但该应用程序始终使用相同的样式，即“容器”

这是 App.js 的完整代码

import React, {Fragment,useEffect,useState} from 'react';
import './App.css';
import Navbar from './components/layout/Navbar';
import Register from './components/auth/Register';
import Login from './components/auth/Login';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'; 
import Alert from './components/layout/Alert';
import {loadUser} from './actions/auth';
import setAuthToken from './utils/setAuthToken';
import Dashboard from './components/dashboard/Dashboard';
import PrivateRoute from './components/routing/PrivateRoute';
import CreateProfile from './components/profile-forms/CreateProfile';
import Profiles from './components/profiles/Profiles';
import Profile from './components/profile/Profile';
import Posts from './components/posts/Posts';
import Post from './components/post/Post';
import PostsAdmin from './components/posts/PostsAdmin';
import EditProfile from './components/profile-forms/EditProfile';
import AddExperience from './components/profile-forms/AddExperience';
import AddEducation from './components/profile-forms/AddEducation';
import SideBar from './components/sideBar/SideBar'


//Redux
import {Provider} from 'react-redux';
import store from './store';


if(localStorage.token){
  setAuthToken(localStorage.token);
}
const App =() => {
  useEffect(() =>{
    store.dispatch(loadUser());
  },[]);
  return (
    <Provider store={store}>
  <Router>
    <Fragment>
      <Navbar/>
      <Route exact path ='/' component={Landing}/>
      <section className={store.getState().auth.isAuthenticated ?"container2":"container"}>
        <Alert/>
        <switch>
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path='/profiles' component={Profiles}/>
          <Route exact path='/Posts' component={Posts}/>
          <Route exact path='/profile/:id' component={Profile}/>
          <Route exact path='/posts/:id' component={Post}/>
          <PrivateRoute exact path="/dashboard" component={Dashboard}/>
          <PrivateRoute exact path="/admin" component={PostsAdmin}/>
          <PrivateRoute exact path="/create-profile" component={CreateProfile}/>
          <PrivateRoute exact path="/edit-profile" component={EditProfile}/>
          <PrivateRoute exact path="/add-experience" component={AddExperience}/>
          <PrivateRoute exact path="/add-education" component={AddEducation}/>
          
        </switch>
      </section>
    </Fragment>
    </Router>
    </Provider>
  );
}


export default App
4

0 回答 0