How to open 2nd accordian on page load in react-CodePudding

I have 2 button in a component. And 2 accordians in a different component called users, I want open 1st accordian on 1st button click and 2nd accordian on 2nd button click, on page load how do I distinguish that its need to open 1st or 2nd accordian, when I have the same url and same id. Default is 1st accordian.

<button onclick={()=>history.push('/user/25')}>
Navigate to 1st accordian
<button>

<button onclick={()=>history.push('/user/25')}>
Navigate to 2nd accordian
<button>

Routes

<Route exact to='/user` component={User}/>
<Route exact to='/user/:id' component={User} />

User Page

Const User = () => {
Const [expanded, setExpanded] = useState (1)

CodePudding user response：

I am assuming you are using react router v5. What you want is to set a state on your links and use that state on the following page to see which accordion to open.

If you're using the history object, you pass the state as the second parameter:

import {useHistory} from 'react-router';

const history = useHistory();

history.push('/user/25', {
  accordianToShow: 'a'
});

If you're using Link, you have to pass an object as the to property that contains the pathname and state:

import {Link} from 'react-router';

<Link to={{
  pathname: '/user/25',
  state:{
    accordianToOpen: 'b'
  }
}}> ... </Link>

To get the passed state, you use useLocation:

import {useLocation} from 'react-router';

const {state} = useLocation();

console.log(state.accordianToOpen);

Here is how that would look like put together:


////
// App.js
////

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import User from "./User";
import Home from "./Home";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact to="/user" component={User} />
        <Route exact to="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}

////
// Home.js
////

import * as React from "react";
import { useHistory } from "react-router";

export default function Home() {
  const history = useHistory();

  const navigateToFirstAccordian = React.useCallback(() => {
    history.push("/user/25", {
      accordianToOpen: "a"
    });
  }, [history]);

  const navigateToSecondAccordian = React.useCallback(() => {
    history.push("/user/25", {
      accordianToOpen: "b"
    });
  }, [history]);

  return (
    <div>
      <button onClick={navigateToFirstAccordian}>
        Navigate to 1st accordian
      </button>
      <button onClick={navigateToSecondAccordian}>
        Navigate to 2nd accordian
      </button>
    </div>
  );
}

////
// User.js
////

import * as React from "react";
import { useLocation } from "react-router";

export default function User() {
  const location = useLocation();
  const accordianToShow = location.state?.accordianToOpen;
  return (
    <div>
      {accordianToShow === "a" ? "This is the first accordian." : null}
      {accordianToShow === "b" ? "This is the second accordian." : null}
    </div>
  );
}

Lastly, here is a codesandbox for you: https://codesandbox.io/s/jovial-banach-lb54tl?file=/src/Home.js