react router v6 how to navigate to route

Question

Beginner question ReactJs and router V6 and I learn react-router-dom and now I can't seem to navigate to another path/page

I have these routes:

const routes = [
    {
        path: 'app',
        element: <DashboardLayout />,
        children: [
            { path: 'account', element: <AccountView /> },
            { path: 'search', element: <SearchListView /> },
            { path: 'dashboard', element: <DashboardView /> },
            { path: 'create', element: <CreateContentView /> },
            { path: 'submissions', element: <SubmissionsView /> },
            { path: 'inbox', element: <InboxView /> },
            { path: 'settings', element: <SettingsView /> },
            { path: 'login', element: <LoginView /> },
            { path: 'register', element: <RegisterView /> },
            { path: '*', element: <NotFoundView /> },
            { path: '/', element: <DashboardView /> },
        ],
    },
    {
        path: '/',
        element: <ContentLayout />,
        children: [
            { path: '404', element: <NotFoundView /> },
            { path: '*', element: <NotFoundView /> },
        ],
    },
];

export default routes;

When I'm here "https://localhost:6545/app/login"

In the picture I press the "sign up" and it should go here:

"https://localhost:6545/app/register"

But it does not it goes to "https://localhost:6545/app/login/register" and that is the <NotFoundView /> When it should go to: https://localhost:6545/app/register

This is my code:

import React from 'react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
import { Formik } from 'formik';
import {
  Box,
  Button,
  Container,
  Grid,
  Link,
  TextField,
  Typography,
  makeStyles
} from '@material-ui/core';
import FacebookIcon from '../../icons/Facebook';
import GoogleIcon from '../../icons/Google';
import Page from '../../components/Page';

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.dark,
    height: '100%',
    paddingBottom: theme.spacing(3),
    paddingTop: theme.spacing(3)
  }
}));

const LoginView = () => {
  const classes = useStyles();
  const navigate = useNavigate();

  return (
    <Page className={classes.root} title="Login">
      <Box
        display="flex"
        flexDirection="column"
        height="100%"
        justifyContent="center"
      >
        <Container maxWidth="sm">
          <Formik
            initialValues={{
              email: 'demo@devias.io',
              password: 'Password123'
            }}
            validationSchema={Yup.object().shape({
              email: Yup.string()
                .email('Must be a valid email')
                .max(255)
                .required('Email is required'),
              password: Yup.string()
                .max(255)
                .required('Password is required')
            })}
            onSubmit={() => {
              navigate('/app/dashboard', { replace: true });
            }}
          >
            {({
              errors,
              handleBlur,
              handleChange,
              handleSubmit,
              isSubmitting,
              touched,
              values
            }) => (
              <form onSubmit={handleSubmit}>
                <Box mb={3}>
                  <Typography color="textPrimary" variant="h2">
                    Sign in
                  </Typography>
                  <Typography
                    color="textSecondary"
                    gutterBottom
                    variant="body2"
                  >
                    Sign in on the internal platform
                  </Typography>
                </Box>
                <Grid container spacing={3}>
                  <Grid item xs={12} md={6}>
                    <Button
                      color="primary"
                      fullWidth
                      startIcon={<FacebookIcon />}
                      onClick={handleSubmit}
                      size="large"
                      variant="contained"
                    >
                      Login with Facebook
                    </Button>
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Button
                      fullWidth
                      startIcon={<GoogleIcon />}
                      onClick={handleSubmit}
                      size="large"
                      variant="contained"
                    >
                      Login with Google
                    </Button>
                  </Grid>
                </Grid>
                <Box mt={3} mb={1}>
                  <Typography
                    align="center"
                    color="textSecondary"
                    variant="body1"
                  >
                    or login with email address
                  </Typography>
                </Box>
                <TextField
                  error={Boolean(touched.email && errors.email)}
                  fullWidth
                  helperText={touched.email && errors.email}
                  label="Email Address"
                  margin="normal"
                  name="email"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  type="email"
                  value={values.email}
                  variant="outlined"
                />
                <TextField
                  error={Boolean(touched.password && errors.password)}
                  fullWidth
                  helperText={touched.password && errors.password}
                  label="Password"
                  margin="normal"
                  name="password"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  type="password"
                  value={values.password}
                  variant="outlined"
                />
                <Box my={2}>
                  <Button
                    color="primary"
                    disabled={isSubmitting}
                    fullWidth
                    size="large"
                    type="submit"
                    variant="contained"
                  >
                    Sign in now
                  </Button>
                </Box>
                <Typography color="textSecondary" variant="body1">
                  Don&apos;t have an account?{' '}
                  <Link to="/register" variant="h6">
                    Sign up
                  </Link>
                </Typography>
              </form>
            )}
          </Formik>
        </Container>
      </Box>
    </Page>
  );
};

export default LoginView;

What I'm I doing wrong?

UPDATE

This is the index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { FirebaseContext } from './firebase';
import store, { firebase } from './redux/store';

ReactDOM.render(
    <FirebaseContext.Provider value={firebase}>
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    </FirebaseContext.Provider>,
    document.getElementById('root'),
);

This is the App.jsx:

import React, { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { useRoutes } from 'react-router-dom';
import { ThemeContextProvider } from './theme/ThemeProvider';
import { getAlbumData } from './redux/albumData/albumData.actions';
import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';
import { withAuthentication } from './session';
import './styles/index.css';
import routes from './routes';

const AnimatedSwitch = () => {
    const routing = useRoutes(routes);

    return (
        <AnimatePresence exitBeforeEnter initial={false}>
            <div>{routing}</div>
        </AnimatePresence>
    );
};

const App = props => {
    const { getMeta, getAlbum } = props;

    useEffect(() => {
        getMeta();
        getAlbum();
    }, [getMeta, getAlbum]);

    return <ThemeContextProvider> {AnimatedSwitch()} </ThemeContextProvider>;
};
const mapDispatchToProps = dispatch => ({
    getMeta: () => dispatch(getMetaData()),
    getAlbum: () => dispatch(getAlbumData()),
});

export default compose(connect(null, mapDispatchToProps), withAuthentication)(App);

( sorry it's a big app) But up till now I only used the const navigate = useNavigate(); . I mean useNavigate() of the router and that works good but now the Link I don't understand

Answer 1

It is late answer, but It could still help people.

I have similar app and code below works for me:

<Link to="/app/register" variant="h6">
 Sign up
</Link>

Note: my routes.js file looks like this:

const routes = [
  {
    path: '/app',
    ...
  },
  {
    path: '/',
    ...
  }
]