没有点击就不会显示反应路线

Question

我想使用 react 路由器来导航我的应用程序。它是一个电子桌面应用程序，所以我的调试是有限的。当登录（在没有路由器的情况下运行）时，会显示带有路由器的组件，但是当显示此组件时，它不会显示确切的路由“/”。只有当我单击“链接”组件时，它才会显示。我正在使用BrowserRouter 组件。有人有想法吗？

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

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="/" />。这将在您的路径中强制使用正斜杠。

禁用路由严格模式

React 路由器添加了一个 exact 属性来解决尾部斜杠的问题。虽然，我不能 100% 确定这在您的示例中是否有效。

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