Урлы Django + React Route

у меня есть следующий djnago urls.py:

urlpatterns = [
path('register',views.registerPage, name="register"),
path('login',views.loginPage, name="login"),
path('logout',views.logoutUser, name="logout"),
path('',views.index),
path('createcompany',views.index),
# path('',views.index, name='home'),
path('test',views.index, name='test'),
path('admin',views.administrare_view,name='admin'),
]

и React route: 

<Router>
        <Drawer />
        <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/createcompany" element={<RegisterPage />}/>
        <Route path="/login" element={<LoginPage />}/>
        <Route path="/test" element={<TestPage />}/>
        <Route path="/admin" element={<AdminPage />}/>
        </Routes>
      </Router>

Когда я нажимаю кнопку выхода из системы, она переводит ссылку на /logout, но пользователь не выходит из системы. Если я ввожу ссылку вручную или обновляю страницу, пользователь выходит из системы. Меню динамически создано на React

const menuList=[
        {
            id:1,
            text:"Profile",
            icon:<PersonIcon sx={{ color: 'gray' }} />,
            link:'/profile',
        },
        {
            id:2,
            text:'Logout',
            icon:<LogoutIcon sx={{ color: 'gray' }} />,
            link:'/logout',
        },
        
    ]
    
    
    <Tooltip title='Profile' placement='bottom' arrow enterDelay={500}>
                <IconButton
                    onClick={userAvatar_Click}
                    size="small"
                    sx={{ ml: 2 }}
                    aria-controls={open ? 'account-menu' : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? 'true' : undefined}
                >
                <Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
            </IconButton>
            
            </Tooltip>
            <Menu
            anchorEl={anchorEl}
            id='account-menu'
            open={open}
            onClose={userAvatar_Close}
            onClick={userAvatar_Close}
            PaperProps={{
                elevation: 0,
                sx: {
                  overflow: 'visible',
                  filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                  mt: 1.5,
                  '& .MuiAvatar-root': {
                    width: 32,
                    height: 32,
                    ml: -0.5,
                    mr: 1,
                  },
                  '&:before': {
                    content: '""',
                    display: 'block',
                    position: 'absolute',
                    top: 0,
                    right: 14,
                    width: 10,
                    height: 10,
                    bgcolor: 'background.paper',
                    transform: 'translateY(-50%) rotate(45deg)',
                    zIndex: 0,
                  },
                },
              }}
            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            >
                {
                    menuList.map(item =>(
                        <MenuItem 
                        
                        onClick={()=> navigate(item.link)}
                        >
                        {item.icon}{item.text}
                        </MenuItem>
                    ))
                }
            
            </Menu>

Выйти из просмотра:

def logoutUser(request):

    logout(request)

    return redirect('login')

Как я могу указать из react на представление django?

В таком полностеке, как это приложение, ссылки во фронтенде предназначены только для клиентской стороны. Для выхода пользователя из системы, вам нужно запросить сервер через API, чтобы получить ссылку на бэкенд, используя что-то вроде fetch api или axios. Например:

axios.post/get(`link to logout in the backend`)
.then(...)
.catch(...);

Вы можете привязать этот запрос к событию onclick на кнопке выхода из системы, и после этого приложение react отправит запрос get/post на бэкэнд, и пользователь выйдет из системы.

Я частично решил эту проблему с помощью вашего ответа, но теперь я не знаю, как ограничить пользователя, чтобы он не использовал приложение после этого и перенаправить его на страницу входа. У меня также есть представление для отображения страницы входа:

@unauthenticated_user
def loginPage(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        user = authenticate(request,username=username, password=password)
        if user is not None:
            login(request,user)
            return redirect('/')
        else:
            messages.error(request, 'Username or password is incorrect!')
            
    context={}
    return render(request,'accounts/login.html',context)

и для рендеринга приложения:

@login_required(login_url='login')
def index(request, *args, **kwargs):
    return render(request,'accounts/blank.html')

Страница входа в систему жестко закодирована и выглядит следующим образом:

После выхода из системы я хочу попасть на эту страницу

Вернуться на верх