不使用 react-router-dom 渲染

Question

Before I used react-router-dom and I hadn't any problem and I changed my route without any problem.
But now I bring hook inside of my project and I got a problem. When I use <NavLink> , my route changes but it does not render anything from my component. When I refresh my page, the component will appear.

My 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>

}

My Home.js:

(in this component I use navlink for changing my page)

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

Answer 1

I realized my problem. as I say it was correct when I use in class component. it is not correct because of my useEffect (hook). I had to use accolade (I mean {}) after use UseEffect in Home.js component.

home.js

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

and the way I had to use useEffect is:

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