Javascript 反应路由器动态url否将我重定向到所需页面

我想根据产品的id访问组件。 这是我的密码

List.jsx

import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import CategoryList from "./CategoryList.jsx";
import ProductList from "./ProductList.jsx";

import React from "react";
import axios from "axios";

const CategoryWithId = ({ match }) => {
  console.log("Category", match.params.listId);

  <ProductList listId={match.params.listId}></ProductList>;
};

function List() {
  const [state, setState] = React.useState([]);

  const getList = () => {
    axios.get("https://api.growcify.com/dev/category/list").then((res) => {
      console.log(res.data);
      setState(res.data);
    });
  };

  React.useEffect(() => {
    getList();
  }, []);
  return (
    <div className="App">
      <Switch>
        <Route path="/" component={() => <CategoryList state={state} />} />
        <Route path="/product/:listId" component={CategoryWithId} />
        <Redirect to="/" />
      </Switch>
    </div>
  );
}

export default withRouter(List);

import React from "react";

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

import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";


const ShowCategory = (props) => {
  const classes = useStyles();
  const { list } = props;
  return (
    <Link to={`/product/${list._id}`}>
      <Paper className={classes.paper} key={list._id}>
        <p style={{ position: "relative", top: "40%" }}>{list.name}</p>
      </Paper>
    </Link>
  );
};

function CategoryList(props) {
  const { state } = props;
  const classes = useStyles();

  return (
    <>
      <div className={classes.header}>
        <Typography variant="h3" style={{ padding: "10px" }}>
          List of Categories
        </Typography>
      </div>
      <div className={classes.container}>
        <Grid container className={classes.root} spacing={2}>
          <Grid item xs={12}>
            <Grid container spacing={2}>
              {state.map((list, index) => (
                <ShowCategory list={list}></ShowCategory>
              ))}
            </Grid>
          </Grid>
        </Grid>
      </div>
    </>
  );
}

export default CategoryList;

从“react router dom”导入{Switch，Route，Redirect，withRouter}；
从“/CategoryList.jsx”导入CategoryList；
从“/ProductList.jsx”导入ProductList；
从“React”导入React；
从“axios”导入axios；
常量CategoryWithId=（{match}）=>{
log（“Category”，match.params.listId）；
;
};
函数列表（）{
const[state，setState]=React.useState（[]）；
常量getList=（）=>{
axios.get（“https://api.growcify.com/dev/category/list）然后（（res）=>{
console.log（res.data）；
设置状态（恢复数据）；
});
};
React.useffect（（）=>{
getList（）；
}, []);
返回(
} />
);
}
使用路由器导出默认值（列表）；

CategoryList.jsx

import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import CategoryList from "./CategoryList.jsx";
import ProductList from "./ProductList.jsx";

import React from "react";
import axios from "axios";

const CategoryWithId = ({ match }) => {
  console.log("Category", match.params.listId);

  <ProductList listId={match.params.listId}></ProductList>;
};

function List() {
  const [state, setState] = React.useState([]);

  const getList = () => {
    axios.get("https://api.growcify.com/dev/category/list").then((res) => {
      console.log(res.data);
      setState(res.data);
    });
  };

  React.useEffect(() => {
    getList();
  }, []);
  return (
    <div className="App">
      <Switch>
        <Route path="/" component={() => <CategoryList state={state} />} />
        <Route path="/product/:listId" component={CategoryWithId} />
        <Redirect to="/" />
      </Switch>
    </div>
  );
}

export default withRouter(List);

import React from "react";

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

import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";


const ShowCategory = (props) => {
  const classes = useStyles();
  const { list } = props;
  return (
    <Link to={`/product/${list._id}`}>
      <Paper className={classes.paper} key={list._id}>
        <p style={{ position: "relative", top: "40%" }}>{list.name}</p>
      </Paper>
    </Link>
  );
};

function CategoryList(props) {
  const { state } = props;
  const classes = useStyles();

  return (
    <>
      <div className={classes.header}>
        <Typography variant="h3" style={{ padding: "10px" }}>
          List of Categories
        </Typography>
      </div>
      <div className={classes.container}>
        <Grid container className={classes.root} spacing={2}>
          <Grid item xs={12}>
            <Grid container spacing={2}>
              {state.map((list, index) => (
                <ShowCategory list={list}></ShowCategory>
              ))}
            </Grid>
          </Grid>
        </Grid>
      </div>
    </>
  );
}

export default CategoryList;

从“React”导入React；
从“react router dom”导入{Link}；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core”导入{排版}；
常量ShowCategory=（道具）=>{
const classes=useStyles（）；
const{list}=props；
返回(
{list.name}
);
};
函数类别列表（props）{
const{state}=props；
const classes=useStyles（）；
返回(
类别清单
{state.map（（列表，索引）=>(
))}
);
}
导出默认类别列表；

我希望在单击特定类别时，我应该重定向到/product/listId

在url部分，我可以看到带有listId的url，但我没有被重定向到与该url相关的所需页面

使用准确的关键字

<Route exact path="/" component={() => <CategoryList state={state} />} />

}/>

在两条路线上，或至少在第一条路线上，提供准确的<代码>链接更新后是否重新加载渲染产品？能否添加渲染CategoryWithId的组件以及如何包装组件？是的，谢谢！为路由器提供精确的数据是有效的！是的，成功了