CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
John Bradshaw
John Bradshaw

Reputation: 189

What is the best way to pass in props to a react router route?

I have a react component I need to render that takes one argument of a string when it is initialized. I need a button to click on that will redirect and render this new component with the string. It sends the string I want when it console.log(pro). everytinme I click on the button it goes to a blank screen and doesn't load.

My routes.js looks like

const Routes = (props) => {
  return (
      <Switch>

        <Route exact path="/member" component={() => <Member user={props.state.member} />} />

        <Route path="/posts" exact component={Posts} />

        <Redirect exact to="/" />
      </Switch>
    
  )
}

export default Routes

The original component looks like this

const Posts = (props) => {
  const dispatch = useDispatch();
  const [postCount, setPostCount] = useState(0);
  const [member, setMember] = useState({});

  const getProfile = async (member) => {
    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    console.log(member)
  props.history.push('/member'
  );
  console.log('----------- member------------') //   console.log(addr)

   return (
    <Member user={member}><Member/>
  );
  }


  return (
      <div>
        {socialNetworkContract.posts.map((p, index) => {
          return <tr key={index}>

  
    <button onClick={() => getProfile(p.publisher)}>Profile</button>
        </tr>})}
      </div>
  )
}

export default withRouter(Posts);

The component I'm trying to render from the Posts component needs to be rendered with a string

const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = props.location;
  const [profile, setProfile] = useState({});


useEffect(() => {
  const doEffects = async () => {
    try {
      const pro = socialNetworkContract.members[0]
      console.log(pro)
      const p = await incidentsInstance.usersProfile(pro, { from: accounts[0] });
      setProfile(p)

    } catch (e) {
      console.error(e)
    }
  }
    doEffects();
  }, [profile]);


  return (
    <div class="container">
{profile.name}
    </div>
  )
}

export default Member;

Upvotes: 0

Views: 20

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281636

You can pass an extra data to a route using state attribute with history.push

const getProfile = async (member) => {
    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    console.log(member)
    props.history.push({
      path: '/member',
      state: { member } 
    });
}

Once you do that you can access it in the rendered route from location.state

import {
  useLocation
} from "react-router-dom";
const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = useLocation();
  console.log(state.member);
  const [profile, setProfile] = useState({});


  ...
}

export default Member;

Also you do not need to pass on anything while rendering the Route

const Routes = (props) => {
  return (
      <Switch>

        <Route exact path="/member" component={Member} />

        <Route path="/posts" exact component={Posts} />

        <Redirect exact to="/" />
      </Switch>
    
  )
}

export default Routes

Upvotes: 1

Related Questions