REACT - .props is not a function-CodePudding

I'm trying to create project where the menu and sidebar appear only in the Homepage and the Back button appears in all pages except the Homepage. The problem is, I can't pass the props to all pages. Only the FriendDetail and GoBack component are able to pass the props. In all other pages the props isn't passed. I need the props to be passed in most of the components so that the Back button is able to appear.

My App.js file:

function App() {
  const [showNav, setShowNav] = useState(true);
  console.log("shownav", showNav);
  return (
    <div className="app">
      <BrowserRouter>
        {showNav && <Menu />}
        {showNav && <Sidebar />}
        {!showNav && <GoBack funcNav={setShowNav} />}

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="duel" element={<Online />} funcNav={setShowNav} />
          <Route
            path="friend/:id"
            element={<FriendDetail funcNav={setShowNav} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

My Online.js file: (one of the many components in the project where I can't pass the props)

function Online(props) {
  useEffect(() => {
    props.funcNav(false);
  });
  console.log("online", props);
  return <div>Online</div>;
}

My FriendDetail.js file: (only component where I can pass the props)

function Friend(props) {
  let { id } = useParams();
  const data = friendsData.data;

  const [friend, setFriend] = useState();

  useEffect(() => {
    let frienddetail = data.find((e) => e.id == id);
    setFriend(frienddetail);
    props.funcNav(false);
  }, [friend]);
  if (!friend) return;

  return (
    <div>
            <p>{friend.nickname}</p>
    </div>
  );
}

This is the error I'm getting:

Error in the Online.js file

CodePudding user response：

You need to pass the prop to the component instead of the route. The route is only a wrapper. You did this correctly for friend detail.

      <Route path="duel" element={<Online funcNav={setShowNav} />}  />
      <Route
        path="friend/:id"
        element={<FriendDetail funcNav={setShowNav} />}
      />

CodePudding user response：

The Online component doesnt have funcNav prop

function App() {
  const [showNav, setShowNav] = useState(true);
  console.log("shownav", showNav);
  return (
    <div className="app">
      <BrowserRouter>
        {showNav && <Menu />}
        {showNav && <Sidebar />}
        {!showNav && <GoBack funcNav={setShowNav} />}

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="duel" element={<Online funcNav={setShowNav} />} funcNav={setShowNav} />
          <Route
            path="friend/:id"
            element={<FriendDetail funcNav={setShowNav} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}