Feature/update dependency react router dom to v6.x (#340)
* Update dependency "react-router-dom" to v6.x Update to v6.11.2 * Update dependency "react-router-dom" to v6.x - Replace "Switch" with "Routes" * Update dependency "react-router-dom" to v6.x - Relative paths * Update dependency "react-router-dom" to v6.x - Nested routes * Update dependency "react-router-dom" to v6.x - Prevent route warnings - Route without an element causes a warning message. - Routes with non-matching Route causes a warning message. * Update dependency "react-router-dom" to v6.x - Replace "useHistory" with "useNavigate" * Update dependency "react-router-dom" to v6.x - Fix "Link" usage * Update dependency "react-router-dom" to v6.x - Overwrite "useParams" and "useLocations" typing For both functions it's the users fault if they are getting used incorrectly. It's inconvenient to always have to make sure the params exist (useParam) or to cast the return object to a specific type (useLocation) - "useParams": Make generic type non-optional - "useLocation": Add generic type * Update dependency "react-router-dom" to v6.x - Fix use-query-params provider
This commit is contained in:
@@ -11,7 +11,7 @@ import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { useMediaQuery, Box } from '@mui/material';
|
||||
import { Box, useMediaQuery } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
|
||||
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
|
||||
@@ -24,7 +24,7 @@ import GetAppIcon from '@mui/icons-material/GetApp';
|
||||
import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import ArrowBack from '@mui/icons-material/ArrowBack';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import NavBarContext from 'components/context/NavbarContext';
|
||||
import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
|
||||
import { createPortal } from 'react-dom';
|
||||
@@ -90,10 +90,11 @@ export default function DefaultNavBar() {
|
||||
const backTo = useBackTo();
|
||||
|
||||
const theme = useTheme();
|
||||
const history = useHistory();
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
|
||||
const isMainRoute = navbarItems.some(({ path }) => path === pathname);
|
||||
|
||||
// Allow default navbar to be overrided
|
||||
if (override.status) return override.value;
|
||||
@@ -109,7 +110,7 @@ export default function DefaultNavBar() {
|
||||
|
||||
const handleBack = () => {
|
||||
if (backTo.url != null) return;
|
||||
history.goBack();
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user