不使用 react-router-dom 渲染答案

【问题标题】：Not rendering with react-router-dom不使用 react-router-dom 渲染
【发布时间】：2021-03-26 22:15:28
【问题描述】：

在我使用 react-router-dom 之前没有任何问题，我更改了路由没有任何问题。
但是现在我在我的项目中引入了钩子，我遇到了一个问题。当我使用<NavLink> 时，我的路线会发生变化，但它不会从我的组件中呈现任何内容。当我刷新页面时，组件就会出现。

我的 App.js：

  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

  const routes={
      route: `/main/symbol/:title/:id`,
      exact: true,
      component: Symbol,
    },
    {
      route: `/main/symbolDetails/:title/:id`,
      exact: true,
      component: SymbolDetails,
    },

render(){

<Router>
        <Switch>
          {routes.map((route, k) => (
            <Route
              key={k}
              exact={route.exact}
              path={route.route}
              component={route.component}
            />
          ))}
        </Switch>
      </Router>

}

我的 Home.js：

（在这个组件中，我使用 navlink 来更改我的页面）

import GridContainer from "../../../components/Grid/GridContainer.js";
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 Sidebar from "../../../components/Sidebar/Sidebar.js"; 

 const useStyles = makeStyles(styles);

  export default function Admin({ ...rest }) {
  // styles
  const classes = useStyles();
   const [data, setData] = useState([]);
  useEffect(() => getSymbolGroup(), []);

 const getSymbolGroup = async () => {
let { data } = await symbolGroup.getSymbolGroup();
 setData(data.data);
 // console.log("data", data);
};

 return (
   <div className={classes.wrapper}>
  <Sidebar
    logoText={"Creative Tim"}
    logo={logo}
    color={color}
    {...rest}
   />
    <div className={classes.mainPanel}>
    <Navbar
 
    />


    <div className={classes.content}>
      <div className={classes.container}>
        <GridContainer>
          {data &&
            data.length &&
            data.map((x, key) => {
              return (
                <div className="Subscrip Bshadow  ">
                  <NavLink
                    to={`/main/symbol/${x.title}/${x.id}`}
                    className="a rightanime display awidth flexd"
                    exact
                  >
                    <div className="">
                      <div className="iconpro display">
                        <img
                          className="imgwidth "
                          src={`http://api.atahlil.com/Core/Download/${x.fileId}`}
                        />
                      </div>
                    </div>
                    <div className="">
                      <p style={{ color: "#a3b0c3", width: "100%" }}>
                        {x.title}
                      </p>
                    </div>
                  </NavLink>
                </div>
              );
            })}
        </GridContainer>
      </div>
      </div>
     )}

【问题讨论】：

Admin 正在呈现什么以及在哪里呈现？它似乎没有在路由器中呈现。 NavLink 组件是什么？那是你自己的东西吗？从包中导入？
@mohammad，我怀疑你的代码停止工作只是因为你交换了<Navlink />而不是<Link />。你能检查一下你没有定义多个<Router></Router>吗？
@DrewReese 从 react-router-dom 导入
@NemanjaLazarevic 不，我的朋友，这与我也尝试过无关。
如果你可以添加一个codesandbox，它会更容易调试。

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

我意识到了我的问题。正如我所说，当我在类组件中使用时它是正确的。由于我的 useEffect （钩子），这是不正确的。在 Home.js 组件中使用 UseEffect 后，我不得不使用 accolade（我的意思是 {}）。

home.js

useEffect(() => getSymbolGroup(), []); //it is not correct and I need to refresh my page to render

而我不得不使用 useEffect 的方式是：

  useEffect(() => {
    getSymbolGroup();
  }, []); 
  // its correct and does not need to refresh page

【讨论】：