Question

我想使用React Router来导航我的应用程序。这是一个电子桌面应用程序，因此我的调试受到限制。登录后（无需路由器即可运行）会显示带有路由器的组件，但是显示此组件时，它不会显示确切的路由“ /”。仅当我单击“链接”组件时，它才会显示。我正在使用BrowserRouter组件。有人有主意吗？

这是父组件的render方法：

render() {
    return (
        <Router>
            <div style={styles.text}>
                <AppBar title={this.state.title}/>
                <Grid container className='mainGrid'>
                    <Grid item>
                        <Route exact path="/" component={Feed} />
                    </Grid>
                </Grid>
                <BottomNav/>
                <Sidenav/>
            </div>
        </Router>
    );
}

那是BottomNav渲染方法：

render() {
    const {value} = this.state;
    return (
        <BottomNavigation className='BottomNav' showLabels value={value}
                          onChange={this.handleChange}>
            <BottomNavigationAction component={Link} to="/" label="Feed" icon={<BookIcon/>}/>
            <BottomNavigationAction component={Link} to="/calendar" label="Calendar" icon={<CalendarIcon/>}/>
            <BottomNavigationAction component={Link} to="/mail" label="Mail" icon={<MailIcon/>}/>
            <BottomNavigationAction component={Link} to="/tickets" label="Tickets" icon={<AssignmentIcon/>}/>
        </BottomNavigation>)
}

这就是Feed组件的渲染方法：

render(){
    return(
        <h1>Hallo Welt (Feed)</h1>
    )
}

如果您需要更多信息，请写评论。

Answer 1

您缺少周围的Switch组件，该组件会呈现第一个自动匹配的Route。

<Switch>
  <Route exact path="/" component={Feed} />
</Switch>

修改

您所在位置的初始路径似乎是一个空字符串，而不是/。我从未遇到过这种现象，所以可能与服务器有关？

我可以想到以下两种解决方案：

添加重定向

在App.jsx中添加一个<Redirect from="" to="/" />。这将在您的路径中强制使用正斜杠。

禁用路由严格模式

反应路由器已添加一个exact道具来解决带有斜杠的问题。虽然，我不是100％肯定会在您的示例中成功。

<Route exact path="/" component={Feed} exact={false} />

单击不显示反应路线

1 个答案: