reactjs - 嵌套 React 组件中的路由

Question

我请你不要扔石头，因为每个人都曾经研究过）底线是：我正在为自己和我的朋友写一个愿望清单，我被困在一个看似非常愚蠢的时刻。嵌套组件是带有导航选项卡和退出按钮的标题。因此，当我正在实现应用程序的框架时，只需通过loggedInUser /！loggedInUser 进行授权。实际上，当您单击退出按钮时，会在loggedInUser 和history.push ('/ login') 中调度一个空字符串。在调试器中，我看到调度正在发生，并且位置被推送到历史记录，但是由于某种原因，渲染条件不会满足。我请求有知识的人的帮助。我想我在某处搞砸了路由，因为我读到由于某种原因没有使用 BrowserRouter，但没有它，什么都不起作用。一般来说，提前谢谢！

入口：

const history = createBrowserHistory()

ReactDOM.render(
  <Router history={history}>
    <Provider store={store}>
      <App />
    </Provider>
  </Router>,
  document.getElementById('root')
);

路由组件：

interface AppProps {
    loggedInUser: string;
}

class App extends React.Component<AppProps & RouteComponentProps> {
    state = { 
        loggedInUser: ""
    }

    render() {
        const history = this.props
        return (
            <>
                <BrowserRouter>
                    <Segment>
                        <Switch>
                            <Route history={history} path='/login' render={() => (!this.props.loggedInUser ? <LoginPage /> : <Redirect to="/account" />)}/>
                            <Route history={history} path='/account' render={() => (this.props.loggedInUser ? <AccountPage/> : <Redirect to="/login" />)}/>
                            <Route history={history} path='/friendslist' render={() => (this.props.loggedInUser ? <FriendsList/> : <Redirect to="/login" />)}/>
                            <Redirect from='/' to='/login' />
                        </Switch>
                    </Segment>
                </BrowserRouter>
            </>
        )
    }
}


const mapStateToProps = (state: StateInterface): AppProps => ({
    loggedInUser: state.loggedInUser
})

export default connect(mapStateToProps)(withRouter(App))

嵌套组件（在每个路由组件中呈现）：

interface HeaderProps extends HeaderPropsFromState{
    activeItem: string;
}

interface HeaderPropsFromState{
    loggedInUser: string;
}


class Header extends React.Component<HeaderProps & RouteComponentProps> {
    state = { 
        activeItem: this.props.activeItem,
    }

    handleItemClick = (e: any, { name }: any) => this.setState({ activeItem: name })

    render() {
        const { activeItem } = this.state
        const { match, history } = this.props
                return (
            <Menu pointing>
                        <Menu.Item
                            name='Friends'
                            active={activeItem === 'Friends'}
                            onClick={this.handleItemClick}
                            as={Link}
                            to="/friendslist"
                        />
                        <Menu.Item
                            name='Account'
                            active={activeItem === 'Account'}
                            onClick={this.handleItemClick}
                            as={Link}
                            to="/account"
                        />
                        {activeItem === 'Friends' &&
                            <Menu.Menu position='right'>
                                <Menu.Item>
                                    <Input icon='users' iconPosition='left' placeholder='Search users...' />
                                    {/* TODO: create function to filter by friend's name */}
                                </Menu.Item>
                            </Menu.Menu>
                        }
                        {activeItem === 'Account' &&
                            <Menu.Menu position='right'>
                                <Menu.Item>
                                    <Button basic 
                                    color='black'
                                    onClick={() => {
                                        console.log(this.props.loggedInUser)
                                        store.dispatch(setLoggedInUser({username: ""}))
                                        history.push('/login')
                                    }}
                                    >Exit</Button>
                                    {/* TODO: create function to exit from account */}
                                </Menu.Item>
                            </Menu.Menu>
                        }
                    </Menu>
        )
    }
}


const mapStateToProps = (state: StateInterface): HeaderPropsFromState => ({
    loggedInUser: state.loggedInUser
})

export default connect(mapStateToProps)(withRouter(Header))

UPD：包含标头组件的组件。

class FriendsList extends React.Component{
    users = [...users objects]

    render() {
        const usersList = this.users.map((user: User, index: number) =>
                <OneFriendWishes user={user} key={index}/>
            )
        return (
            <>
                <Header activeItem={"Friends"}/>
                {usersList}
            </>
        )
    }
}

export default FriendsList

标签： reactjstypescriptreact-reduxreact-routerreact-router-dom