Question

我正在通过开发一个简单的应用程序来学习 React。

我在登录后实现了一个受保护的路由。登录后，我将被重定向到主页，该主页显示一个带有两个级联下拉列表的导航栏和一个带有手风琴的侧边栏选择第一个下拉列表填充第二个。选择第二个下拉菜单填充侧边栏手风琴。一切正常，但我有一个无法解决的问题

我的路线是这样设置的

const AppRoutes = () => {
    return ( 
        <>
            <Switch>
                <Route path = '/login' component={LogIn}/>
                <PrivateRoute path = '/' component={PPC} exact={true}/>
            </Switch>
        </>
     );
}
 
export default AppRoutes;

如何在私有路由中管理更远的路由？例如，我有一个组件 Main 和一个组件侧边栏

在侧边栏中我有链接到='/test'

import React from 'react';
import { Card } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const Feature = (props) => {
    const {data, selected, clicked} = props

    return ( 
        <Card.Body>
        {data.map(i => {
            return (
            <Link to='/test'
            // href="#"
            onClick={() => selected(i.id)}
            key={i.id}
            className={clicked === i.id ? 'sidemenu-2-level active' : 'sidemenu-2-level'}
            >
                {i.feature}
            </Link>
            )
        })}
        </Card.Body>
     )
}
 
export default Feature;

主要是这样

import React from 'react';
import { Row, Col } from 'react-bootstrap'
import  "./style.main.css";
import Test from './test';
import PrivateRoute from '../../../routes/privateRoute'


    const Main = () => {
      
        return ( 
            <Row id='main'>
                <Col className='mainCol'>
                <PrivateRoute path = '/test' component={Test} />
                </Col>
            </Row>
         );
    }
     
    export default Main;

基本上我希望测试组件在 Main 组件中呈现当我点击链接时，我会看到一个白页。

如何管理？

编辑：我终于明白了。问题是进入私人路线的确切位置。删除该选项现在一切正常

反应路由器嵌套路由

0 个答案: