Блог

Вот мой app.js, Я хочу, чтобы пользователи переходили непосредственно в /auth, а не в /home, когда они заходят на сайт, и после входа в систему их отвезут домой

 return (
      <Grid
        container
        direction="column"
        className={classes.app}>

        <Header />
        <Grid item xs={12} className={classes.body}>
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route exact path="/home" component={Home} />
            <Route path="/auth" component={withAuthenticator(MyAuth)} />
            <Route path="/user" component={withAuthenticator(User)} />
            <Route path="/product" component={withAuthenticator(Product)} /
            <Route path="*" component={NotFound} />
          </Switch>
        </Grid>
        <Grid item xs={12} className={classes.footer}>
          <Footer />
        </Grid>
)
 

1. Первым решением будет использование метода визуализации внутри маршрута. Просто проверьте, разрешено ли использование показывать домашнюю страницу, если это не страница входа в систему. Маршрут будет выглядеть так:

     <Switch>
            <Route path="/" render={()=> isAuthed ? <Home/> : <Login/>} />
            <Route exact path="/home" component={Home} />
            <Route path="/auth" component={withAuthenticator(MyAuth)} />
            <Route path="/user" component={withAuthenticator(User)} />
            <Route path="/product" component={withAuthenticator(Product)} /
            <Route path="*" component={NotFound} />
    </Switch>
    

2. Второе решение. Это для использования условия внутри <Home/> компонента.

Home.js

 const Home = ()=> {
   useEffect(()=>{
       isAuthed amp;amp; <Redirect to="/login" />
     },[])

  return(....)

}
 

Маршрут будет таким

 <Switch>
    <Route path="/home" component={Home} />
    <Route from="/login"component={Login} />
    <Route path="/auth" component={withAuthenticator(MyAuth)} />
    <Route path="/user" component={withAuthenticator(User)} />
    <Route path="/product" component={withAuthenticator(Product)} /
    <Route path="*" component={NotFound} />
  </Switch>







    
 

Я решаю эту проблему так в своих проектах… Во-первых, вам нужен компонент, который я обычно называл PrivateRote, и вот как он выглядит (вы можете увидеть полное объяснение того, как это работает здесь. Я узнал об этом решении в этой статье, но в Интернете есть еще кое-что, что вы могли бы найти:

 import React from 'react';
import {useSelector} from "react-redux";
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({component: Component, ...rest}) => {
    const authenticated = useSelector(state=> state.auth.login.authenticated);
    return (
        <Route
            {...rest}
            render={(props) => authenticated === true
                ? <Component {...props} />
                : <Redirect to={{pathname: '/login', state: {from: props.location}}}/>
            }
        />
    )
};

export default PrivateRoute;
 

это специальная функция, которая заботится о том, чтобы показать или скрыть ваш компонент, если маршрут, который вы пытаетесь получить, является частным или нет. Тогда вам просто нужно использовать его в файле маршрутов, как это:

 import React from 'react';
import { Route } from 'react-router-dom';

import TurnosCreatePage from "../views/TurnosCreatePage";
import TurnosListPage from "../views/TurnosListPage";
import PrivateRoute from "./Routes Component/PrivateRoute";

export default [
  <PrivateRoute path="/turnos/create" component={TurnosCreatePage} exact key="create" />, //this is a private route example
  <Route path="/turnos/list/:id" component={TurnosListPage} key="list" />, //this a public route example
];

 

затем вам просто нужно импортировать файл маршрута в свой app.js вот так:

 import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from './views/Home';
import NotFoundPage from './components/Errors/NotFoundPage';

//Import your Routes here
import turnoRoutes from './routes/turno';

const App = () => {

    return (
        <>
            <Switch>
                <Route path="/" component={Home} strict={true} exact={true} key="home" />
                {turnoRoutes}
                <Route component={NotFoundPage} key="notfound" />
            </Switch>
        </>
    )
};

export default App;
 

Я надеюсь, что это может вам помочь! Не стесняйтесь задавать любые вопросы!