Блог

У меня проблема с несколькими макетами в маршрутизации react и не найдена страница

Основные маршруты => с основным макетом

Маршрутизаторы администратора => с макетом администратора

страница входа => без каких-либо макетов

404 страница => без каких-либо макетов

Мой код:

 import React from 'react';
import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import AuthContextProvider from './context/authContext/AuthContext';
 

 const main = () => {
  return (
    <div>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Main} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route path="/blog" exact component={Blog} />
      </Switch>
    </div>
  )
}
 

 const admin = () => {
  return (
    <div>
      <PanelNavbar />
      <Switch>
        <Route path="/admin/panel" exact component={Panel} />
        <Route path="/admin/panel/menu" exact component={Menu} />
        <Route path="/admin/panel/blog" exact component={Blog} />
      </Switch>
    </div>
  )
}
 

 const App = (props) => {
  return (
    <Router>
      <AuthContextProvider>
        <Switch>
          <Route path="/admin/login" exact component={Login} />
          <Route path='/admin' component={admin} />
          <Route path="/" component={main} />
          <Route path='/404' component={Page404} />
          <Redirect to='/404' />
        </Switch>
      </AuthContextProvider>
    </Router>
  );
}
 

Я не хочу, чтобы страница 404 принимала какие-либо макеты.

Я хочу, чтобы просто неправильный адрес был перенаправлен на страницу 404.

Пожалуйста, помогите мне.

Спасибо.

вы должны определить маршрут для страницы 404, как в приведенном ниже примере:

 <Route path='/404' component={Page404} />
<Redirect from='*' to='/404' />
 

затем, если URL-адрес не совпадает с определенными маршрутами, пользователь будет перенаправлен на страницу / маршрут 404.

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

 function AppRoute({...params}) {
    return (
    <>
        <AnyComponentLikeNavBar />
        <Route {...params} />
    </>
    );
}

function App() {
    return (
    <BrowserRouter>
        <Switch>
            <AppRoute path="/" exact component={Main} />
            <AppRoute path="/contact" exact component={Contact} />
            <AppRoute path="/about" exact component={About} />
            <AppRoute path="/blog" exact component={Blog} />

            <Route path='/404' component={Page404} />
            <Redirect from='*' to='/404' />
        </Switch>
    </BrowserRouter>
    );
}