reactjs - 私有路由的嵌套路由反应路由器dom

Question

const App = () => {
    const isLoggedIn = useRecoilValue(isLoggedInState)
    const setCustomers = useSetRecoilState(customersState);
    const setSchedules = useSetRecoilState(scheduleState);
    useEffect(() => {
        if(isLoggedIn) {
            setCustomers(customers);
            setSchedules(schedules);
        }
    },[isLoggedIn, setCustomers, setSchedules])
    return <div className="App">
        <Switch>
            <PublicRoute exact={true} path="/login" component={Login} />
            <PrivateRoute exact={true} path="/" component={MainApp} />
        </Switch>
    </div>;
}

const Private = ({component: Component, ...rest}) => {
    const isLoggedIn = useRecoilValue(isLoggedInState);
    return <Route {...rest}
    render={props => {
        return isLoggedIn
            ? <Component {...props} />
            : <Redirect to={{pathname: "/login", state: {from: props.location}}}/>
    }}/>
};

const MainApp = () => {
    let { path, url } = useRouteMatch();
    return <>
        <header>
            <Link exact to={path} activeClassName="active-tab">Schedule Today</Link>
            <Link exact to={`${path}customer`} activeClassName="active-tab">Customers</Link>
        </header>
        <Switch>
            <PrivateRoute exact path={url} component={Schedules}/>
            <PrivateRoute exact={true} path={`${url}customer`} component={Customers}/>
            <PrivateRoute exact={true} path={`${url}customer/:id`} component={CustomerInfo}/>
        </Switch>
    </>;
};

在 react router dom 文档中，嵌套需要在同一路径下。我尝试构建具有私有和公共路由的 Web 应用程序。在私有路由下要创建嵌套路由。登录后转到我想要的组件，但是当单击客户选项卡时无法识别为什么？此外，标题被删除。

标签： reactjsreact-router-dom