Блог

Я провел аутентификацию с помощью fireBase и частного маршрута для пользователей, входящих в систему. Но когда я вхожу в один из компонентов друг друга (не для входа в систему или регистрации продукта), URL обновляется, но он не отображается. App.js

 function App() {  return (  lt;AuthProvidergt;  lt;Switchgt;  lt;PrivateRoute exact path='/' component={MainPageComp}/gt;  lt;Route path='/Signup' component={SignupComp}/gt;  lt;Route path='/Login' component={LoginComp}/gt;  lt;/Switchgt;  lt;/AuthProvidergt;  ); }  

В основном компоненте также есть Маршруты:

 lt;Switchgt;  lt;PrivateRoute exact path='/' component={ProductsComp}/gt;  lt;Route path='/Products' component={ProductsComp}/gt;  lt;Route path='/Customers' component={CustomersComp}/gt;  lt;Route path='/Purchases' component={PurchasesComp}/gt;  lt;Route path='/AddProduct' component={AddProductComp}/gt;  lt;Route path='/EditProduct/:id' component={EditProductComp}/gt;  lt;Route path='/EditCustomer/:id' component={EditCustomerComp}/gt; lt;/Switchgt;  

PrivateRoute.js:

 export default function PrivateRoute({component:Component,...rest}){   const {currentUser} = useAuth()  return(  lt;Route  {...rest}  render={props=gt;{  return currentUser?lt;Component {...props}/gt;:lt;Redirect to='/login'/gt;  }}gt;   lt;/Routegt;  ) }  

Спасибо за помощников

В пределах Switch компонентного пути порядок и специфичность имеют значение! Вы неправильно указали домашний "/" путь, чтобы он точно соответствовал. Это обязательно исключает возможность сопоставления каких-либо неточных «подмаршрутов» PrivateRoute компонентом и, поскольку путь больше точно не совпадает MainPageComp , компонент размонтирован.

Чтобы решить эту проблему, упорядочите маршруты/пути в разделе Switch от более конкретных к менее конкретным путям и удалите exact опору для любых путей/маршрутизируемых компонентов, которые потенциально могут отображать вложенные/вложенные маршруты, чтобы их также можно было сопоставлять и отображать. На самом деле, если указано правильно, у вас почти не должно быть необходимости когда-либо использовать exact опору.

Апп

 function App() {  return (  lt;AuthProvidergt;  lt;Switchgt;  lt;Route path='/Signup' component={SignupComp}/gt;  lt;Route path='/Login' component={LoginComp}/gt;  lt;PrivateRoute path='/' component={MainPageComp}/gt;  lt;/Switchgt;  lt;/AuthProvidergt;  ); }  

Основной пакет

 lt;Switchgt;  lt;Route path='/Products' component={ProductsComp}/gt;  lt;Route path='/Customers' component={CustomersComp}/gt;  lt;Route path='/Purchases' component={PurchasesComp}/gt;  lt;Route path='/AddProduct' component={AddProductComp}/gt;  lt;Route path='/EditProduct/:id' component={EditProductComp}/gt;  lt;Route path='/EditCustomer/:id' component={EditCustomerComp}/gt;  lt;PrivateRoute path='/' component={ProductsComp}/gt; lt;/Switchgt;