reactjs - 这个路由器如何在 React.js 中工作 - 我不能像我想要的那样做链接

Question

我有一个关于路由器和 react-router-dom V6 的初学者问题，我不明白为什么这不起作用。

我是这样导入Link的：

import { Link } from 'react-router-dom';

我的路线如下所示：

import React from 'react';
import ContentLayout from './components/structure/ContentLayout';
import DashboardLayout from './components/DashboardLayout';
import AccountView from './components/DashboardLayout/views/account/AccountView';
import SearchListView from './components/DashboardLayout/views/search/SearchListView';
import DashboardView from './components/DashboardLayout/views/dashboard/DashboardView';
import NotFoundView from './components/DashboardLayout/views/errors/NotFoundView';
import CreateContentView from './components/DashboardLayout/views/creator/CreateContentView';
import SettingsView from './components/DashboardLayout/views/settings/SettingsView';
import LoginView from './components/DashboardLayout/views/auth/LoginView';
import RegisterView from './components/DashboardLayout/views/auth/RegisterView';
import SubmissionsView from './components/DashboardLayout/views/submissions/SubmissionsView';
import InboxView from './components/DashboardLayout/views/inbox/InboxView';


    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;

当我在“https://localhost:6545/app/login”时，我会这样做：

<Typography color="textSecondary" variant="body1">
  Don't have an account?
  <Link component={RouterLink} to="register" variant="h6">
  Sign up
 </Link>
</Typography>

当前：浏览器转到此处https://localhost:6545/app/login/register

预期：它应该去这里https://localhost:6545/app/register

我错过了什么？

更新

这是 React.js 组件：

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
import { Formik } from 'formik';
import {
  Box,
  Button,
  Container,
  Grid,
  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: '[e-mail]',
              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't have an account?
                  <Typography
                    component={Link}
                    to="/register"
                    color="textSecondary"
                  >
                    Sign up
                  </Typography>
                </Typography>
              </form>
            )}
          </Formik>
        </Container>
      </Box>
    </Page>
  );
};

export default LoginView;

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'),
);

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);

标签： reactjsreact-router-dom

Answer 1

更好地使用材质 ui，您可以将链接导入 Typography。

您可以继续赋予排版属性。

“/”从根目录开始。如果添加它，您将从主目录继续。

import { Link } from 'react-router-dom';

<Typography color="textSecondary" variant="body1">
    Don't have an account?
    <Typography component={Link} to="/register" color="textSecondary" >
    Sign up
    </Typography>
 </Typography>