CODEWITHSUNDEEP
reactjsreact-router
Jordec
Jordec

Reputation: 1562

How to setup react routing for detail and create page?

I'm currently dealing with routing issues in my reactjs app.

I need to have an URL for the following pages:

/employees
/employees/5
/employees/create

But when clicking on the /employees page, I'll get redirected to /employees/create.

Anybody know what I'm missing here?

<Router>
    <NavBar />
    <Container maxWidth="lg" className="container-padding">
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/employees" component={EmployeeOverview} />
            <Route exact path='/employees/create' component={EmployeeDetail} />
            <Route path='/employees/:employeeId' component={EmployeeDetail} />
            <Route path="*" component={NotFound} />
        </Switch>
    </Container>
</Router>

NavBar component:

<List>
    <ListItem button component={Link} to="/">
        <ListItemIcon>
            <Icons.Home />
        </ListItemIcon>
        <ListItemText primary="Home" />
    </ListItem>
    <Divider />
    <ListItem button component={Link} to="/employees">
        <ListItemIcon>
            <Icons.Group />
        </ListItemIcon>
        <ListItemText primary="Werknemers" />
    </ListItem>
    <ListItem button component={Link} to="/employees/5">
        <ListItemIcon>
            <Icons.Group />
        </ListItemIcon>
        <ListItemText primary="Werknemer details" />
    </ListItem>
</List>

EmployeeOverview component

export default class EmployeeOverview extends Component<any, any> {

render() {
        return (
            <div>
                <Box mt={2}>
                    <Button variant="contained" color="primary" onClick={this.props.history.push('/employees/create')}>
                        Werknemer toevoegen
                    </Button>
                </Box>
            </div>
        )
    }
}

Upvotes: 1

Views: 99

Answers (3)

Jordec
Jordec

Reputation: 1562

The solution to my problem was not that the routing was incorrect. The routing was working as it should work.

The issue lies in the EmployeeOverview page.
there was an onClick event on a button that would redirect me to the employees/create page when I clicked on it. But it was written to self-execute onload.

So instead of this

<Button onClick={this.props.history.push('/employees/create')}>
    Werknemer toevoegen
</Button>

I wrote this and solved it

<Button onClick={() => {this.props.history.push('/employees/create')}}>
    Werknemer toevoegen
</Button>

Credits to Darkilen for pointing me in the right direction.

Upvotes: 1

tareq aziz
tareq aziz

Reputation: 777

I think you need to comment out the following line and keep rest of the code as before

<Route exact path='/employees/create' component={EmployeeDetail} />

Hope it will work

Upvotes: 0

Saqib Naseeb
Saqib Naseeb

Reputation: 741

You can use NavLink in your List to achieve this. 

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

After Import wrap your each <ListItem> in <NavLink> like this.

<NavLink
    to='/employees/5'>
  <ListItem>
        <ListItemIcon>
            <Icons.Group />
        </ListItemIcon>
        <ListItemText primary="Werknemer details" />
    </ListItem>
</NavLink>

Upvotes: 0

Related Questions