问题访问站点页面ReactJS，React Router

Question

我是ReactJS的新手，我的项目中有一个问题：网站的页面未显示。我正在向您展示处理该问题的代码部分。 这是重定向到第二页的第一页的组成部分：

    import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Grid from "@material-ui/core/Grid";
import { Redirect } from "react-router-dom";
import * as years from "./years.json";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  },
  input: {
    marginTop: 150
  },
  floatingLabelFocusStyle: {
    //   color: "white"
  }
}));

const year = years.years;

export default function Select() {
  const classes = useStyles();
  const [value, setValue] = useState(null);

  const handleRouter = value => {
    setValue(value);
    // console.log(value);
  };

  return (
    <Grid container direction="row" justify="center" alignItems="center">
      {value !== null && <Redirect to={value} />}
      <Autocomplete
        id="standard-select-currency-native"
        className={classes.input}
        options={year}
        onChange={(event, value) => handleRouter(value)}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField
            {...params}
            label="Choix de l'année"
            InputLabelProps={{
              className: classes.floatingLabelFocusStyle
            }}
            variant="outlined"
          />
        )}
      />
    </Grid>
  );
}

这是第二页的组成部分，重定向到第三页：

    export default function YearChoice(props) {
  const classes = useStyles();
  const [value, setValue] = useState(null);

  const handleRouter = event => {
    setValue(event.target.value);
  };

 
  return (
    <Grid
      container
      className={classes.grid}
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      justifyContent="center"
      textAlign="center"
    >
      {value !== null && <Redirect to={value} />}
      <Card className={classes.root} variant="outlined" justifyContent="center">
        <CardContent>
          <Typography gutterBottom className={classes.title}>
            Statistiques de l'année 2020
          </Typography>
          <FormControl component="fieldset">
            {/* <RadioGroup onChange={handleRouter}> */}
            {Array.isArray(country) &&
              country.map(options => (
                <FormControlLabel
                  key={options}
                  value={options}
                  control={<Button onClick={handleRouter} />}
                  label={options}
                  className={classes.button}
                />
              ))}
            {/* </RadioGroup> */}
          </FormControl>
        </CardContent>
      </Card>
    </Grid>
  );
}

然后是路线文件：

    import Dashboard from "@material-ui/icons/Dashboard";
import DashboardPage from "views/Dashboard/Dashboard.js";
import YearChoice from "views/YearChoice/YearChoice.js";
import CountryStats from "views/CountryStats/CountryStats.js";

const dashboardRoutes = [
  {
    path: "/dashboard",
    name: "Dashboard",
    rtlName: "لوحة القيادة",
    icon: Dashboard,
    component: DashboardPage,
    layout: "/admin"
  },
  {
    path: "/:year",
    name: "YearChoice",
    rtlName: "لوحة القيادة",
    component: YearChoice,
    layout: "/admin"
  },
  {
    path: "/:country",
    name: "CountryStats",
    rtlName: "لوحة القيادة",
    component: CountryStats,
    layout: "/admin"
  }
];

这是管理文件：

    import React from "react";
import { Switch, Route, Redirect } from "react-router-dom";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Navbar from "components/Navbars/Navbar.js";
// import Footer from "components/Footer/Footer.js";
// import FixedPlugin from "components/FixedPlugin/FixedPlugin.js";

import routes from "routes.js";

import styles from "assets/jss/material-dashboard-react/layouts/adminStyle.js";

import bgImage from "assets/img/background.jpg";

let ps;

const switchRoutes = (
  <Switch>
    {routes.map((prop, key) => {
      if (prop.layout === "/admin") {
        return (
          <Route
            path={prop.layout + prop.path}
            component={prop.component}
            key={key}
          />
        );
      }
      return null;
    })}
    {/* <Redirect from="/admin" to="/admin/dashboard" /> */}
  </Switch>
);

[...]

    return (
    <div className={classes.wrapper}>
      <div className={classes.mainPanel} ref={mainPanel}>
        <Navbar />
        {/* <div className={classes.backgroundImage}></div> */}
        {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
        {getRoute() ? (
          <div className={classes.content}>
            <div className={classes.container}>{switchRoutes}</div>
          </div>
        ) : (
          <div className={classes.map}>{switchRoutes}</div>
        )}
      </div>
    </div>
  );
}

最后是索引文件：

 import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { Provider } from "react-redux";
import configureStore from "./redux/store/configureStore";
// core components
import Admin from "layouts/Admin.js";

import "assets/css/material-dashboard-react.css?v=1.8.0";

const hist = createBrowserHistory();
const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <Router history={hist}>
      <Switch>
        <Route path="/admin" component={Admin} />
        <Redirect from="/" to="/admin/dashboard" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

因此，当我可以轻松地从第一页转到第二页时，为什么我无法进入最后一页。 我感谢那些花时间咨询我的问题以及能够为我提供帮助的人。