Почему в React компонент Navigate не перерендеривается?

Question

[_pl1ne_]

Добрый времени суток. Недавно я начал изучать реакт и у меня возникли проблемы с компонентом Navigate. Проблема в том, что при перерендеривании навигейта он не перерендеревается и не видит новых ссылок. Благодарю за помощь!

import React, { useState } from 'react';
// import { BrowserRouter } from 'react-router-dom'
import {Routes, Route, Navigate} from 'react-router-dom'
import { CreatePage } from './components/CreatePage';
import { AuthPage } from './components/AuthPage';
import { DetailPage } from './components/DetailPage';


import './styles/App.css'

function App() {
  const [isAuth, setIsAuth] = useState(false)

  const authContent = () => {
    if(isAuth){
      return(
        <Routes>
          <Route path='/create' element={<CreatePage />} />
          <Route path='/links' element={<AuthPage />} />
          <Route path='/detail/:id' element={<DetailPage />} />
          <Route path='*' element={<Navigate to="/create"/>} />   
        </Routes>
      )
    }
    return(
      <Routes>
        <Route path='/' element={<AuthPage />} />
        <Route path='*' element={<Navigate to="/"/>} />
      </Routes>
    )
  }
  const auth = () => {
    setIsAuth(!isAuth)
  }


  return (
    <div className="App">
        <h1>Home page</h1>
        {authContent(isAuth)}
        <button onClick={auth}>Login/Logout</button>
    </div>
  );
}

export default App;

Comments

[szQocks]

Попробуй заменить , а так больше ошибок я не вижу,

const auth = () => {
    setIsAuth(prev => !prev)
  }


  return (
    <div className="App">
        <h1>Home page</h1>
        {authContent()}
        <button onClick={auth}>Login/Logout</button>
    </div>
  );

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

<Routes>
          <Route path='/create' element={<CreatePage />} />
          <Route path='/links' element={<AuthPage />} />
          <Route path='/detail/:id' element={<DetailPage />} />
          <Route path='*' element={<Navigate to="/create"/>} />   
        </Routes>

[_pl1ne_]

szQocks, попробовал, результат тот же

[szQocks]

_pl1ne_, что пробовал ? ты роуты обернул вообще в BrowserRouter к примеру хотя бы?

[_pl1ne_]

szQocks, да, компонент App обернут в BrowserRouter в файле index.js

[szQocks]

_pl1ne_, попробуй так, если не сработает, то забей на эту тему с отрисовкой роутов по условию и делай через хок компонент проверку на авторизацию Cсылка

const authContent = () => {
    if(isAuth){
      return(
   <>
          <Route path='/create' element={<CreatePage />} />
          <Route path='/links' element={<AuthPage />} />
          <Route path='/detail/:id' element={<DetailPage />} />
          <Route path='*' element={<Navigate to="/create"/>} />   
  </>
      )
    }
    return(
   <>
        <Route path='/' element={<AuthPage />} />
        <Route path='*' element={<Navigate to="/"/>} />
  </>
    )
  }





<Routes>
{authContent(isAuth)}
</Routes>

Answer 1

[_pl1ne_]

Я не правильно описал саму проблему. При нажатии на кнопку идёт "авторизация" и после нее загружаются новые новой. Но проблема в том, что роут с навигейтом, который рендерится в самом начале(когда пользователь не "авторизован"), при авторизации пользователя не переренденивается и не видит новых ссылок.