CODEWITHSUNDEEP
reactjsreact-router
nishant
nishant

Reputation: 117

navigating to another component in the same page layout

I have a list of data which i am displaying using map on the left side of the screen , upon clicking the , a new component should be rendered in the right side of the same screen and also the url has to change in the browser , thought of using onClick instead of Link to but if used then cannot specify the change of url .

const Home = (props) => {
return(
<div className="main-wrapper">
  <div className="service-wrapper">
    <Service/>
  </div>
  <div className="list-wrapper">
    <Route path="/service/service_name" exact component={List}/>
  </div>
</div>
);
}

Upvotes: 1

Views: 2245

Answers (2)

cEeNiKc
cEeNiKc

Reputation: 1318

You can use onClick but then you will have to use history object provided by the react router library. It will look like this:-

onClick(() => history.push(`/service/${service}`));

To access history you will have to import withRouter hoc from react router library.

    import { withRouter } from "react-router-dom";


    class YourComponent extends Component {

      const { history } = this.props;

    }

    export default withRouter(YourComponent);

Left and right dashboard structure should look this this:-

const LeftDashboard = () => {
   return (
    <div>
     // rest of your ui
    </div>
   )
}

const RightDashboard = ({ activeParam }) => {

  const renderActive = () => {
     switch(activeParam) {
    case 1:
     return somecomponent;
    case 2:
     return someother;
    default:
     return defaultcomponent;
   }  
  }

   return renderActive();
}

 class App extends Component {

  render() {
   <React.Fragment>
    <LeftDashboard />
    <RightDashboard activeParam={//pass active param} />
   </React.Fragment> 
  }
 }

Another option will be to put your routes in the right dashboard component:-

const RightDashboard = () => {
   return (
    <React.Fragment>
     <Route path="/somepath" component={<Mycomponent />} />
     <Route path="/someotherpath" component={<Myothercomponent />} />
    </React.Fragment>
   )

}

And rest of the structure will remain same as above.

Upvotes: 0

Shad
Shad

Reputation: 1219

React router v4 makes use of dynamic routing ie your new component can render if the location matches the right route.

To achieve what you want, you can add a Route with the specific link path that will render the new component.

In your code just make the change in the following line:-

 <div className="list-wrapper">
       <Route path="Your path" component={List} /> 
 </div>

Upvotes: 1

Related Questions