Question

我目前正在我的reactjs应用程序中处理路由问题。

我需要以下页面的URL：

/员工
/ employees / 5
/ employees / create

但是，当单击/ employees页面时，我将重定向到/ employees / create。

有人知道我在这里想念什么吗？

<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组件：

<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组件

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>
        )
    }
}

Answer 1

我的问题的解决方案不是路由不正确。路由正在正常工作。

问题出在EmployeeOverview页上。
按钮上有一个onClick事件，当我单击它时，该事件会将我重定向到employees/create页。但这是为了自动执行onload而编写的。

所以代替这个

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

我写了这个并解决了

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

为了向我指出正确的方向，向Darkilen致谢。

Answer 2

您可以在列表中使用NavLink来实现此目的。

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

导入后，将每个<ListItem>包裹在<NavLink>中，

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

Answer 3

我认为您需要注释掉以下行，并像以前一样保留其余代码

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

希望它会起作用

如何设置反应路线以了解详细信息并创建页面？

3 个答案: