Как показать страницу 404, когда пользователь вводит какой-либо URL на странице входа, если пользователь не аутентифицирован?

Question

Я хочу, чтобы пользователь был заблокирован путем доступа к неверному URL-адресу с экрана входа в систему, если пользователь, например, не прошел проверку подлинности, если учесть, что пользователь находится на экране входа в систему, и если пользователь пытается получить доступ к произвольному URL-адресу localhost:3000/kanskd, его / ее следует перенаправить на экран входа. Я могу добиться того, что мне нужно, поместив компонент маршрута NoMatch, однако он также соответствует маршруту внутри моего приложения и не соответствует ни одному из этих маршрутов [Маршруты, которые я отображаю после маршрута NoMatch, не работают] ,

index.js

import Routes from './routes'

   <Switch>
       <Route exact path="/" render={() => {
          if(!store.getState().login.isAvailable) {
            return <Redirect to="/login"/>
          } else {
            return <Redirect to="/dashboard" />
          }             
        }} 
       /> 
       <Route exact path="/login" component={Login} />
       <Route component={NoMatch} />
       {Routes.map((prop, key) => {
          return <Route path={prop.path} key={key} component={prop.component} 
                  />;
       })}

   </Switch>

NoMatch.jsx

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

const NoMatch = ({ location }) => (
    <div>
      <h3>No match for <code>{location.pathname}</code></h3>
    </div>
)

export default withRouter(NoMatch);

EDIT:

маршруты / index.js

import Dashboard from "Dashboard/Dashboard.jsx";

var Routes = [{ path: "/", name: "Dashboard", component: Dashboard }];

export default Routes;

Как только пользователь входит в систему, он направляет его в Dashboard и в Dashboard, есть несколько других маршрутов.

Answer 1

Таким образом, вам нужно решить 2 вещи: показать компонент NoMatch, когда URL не найден, и защитить некоторые маршруты от незарегистрированных пользователей.

Для первого вы должны поместить <Route component={NoMatch} /> непосредственно перед закрывающим тегом <Switch>, думайте об этом как о переключателе в простом javascript, последний случай всегда - это случай default, если нет другого соответствия default будет выполнен так же, как здесь.

Вторая проблема требует немного дополнительного кода, вы должны создать компонент, который перенаправляет пользователя, если он не вошел в систему, что-то вроде этого (это из документации по response-router документации):

function PrivateRoute({ component: Component, isLoggedIn,...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

Затем используйте этот компонент для защищенных маршрутов:

<Switch>
    <Route exact path="/" render={() => {
       if(!store.getState().login.isAvailable) {
         return <Redirect to="/login"/>
       } else {
         return <Redirect to="/dashboard" />
       }             
     }} 
    /> 
    <Route exact path="/login" component={Login} />
    {Routes.map((prop, key) => {
       return <PrivateRoute path={prop.path} key={key} component={prop.component} isLoggedIn={isUserLoggedIn} 
               />;
    })}
    <Route component={NoMatch} />
</Switch>

isUserLoggedIn является составной переменной, вы должны заменить ее, если вы вошли в методы проверки

Edit: Путь должен быть /dashboard:

import Dashboard from "Dashboard/Dashboard.jsx";

var Routes = [{ path: "/dashboard", name: "Dashboard", component: Dashboard }];

export default Routes;

если вы хотите сохранить / в качестве пути, вы должны вернуть компонент панели мониторинга внутри компонента Route вместо перенаправления:

    <Route exact path="/" render={() => {
       if(!store.getState().login.isAvailable) {
         return <Redirect to="/login"/>
       } else {
         return <Dashboard/>
       }             
     }} 
    />