Question

我正在尝试使用 React Router 创建嵌套的选项卡路由，我有一个类似的问题，但没有得到确切的答案，当我尝试创建嵌套的选项卡路由时，刷新页面时我开始遇到问题，也就是说，当页面刷新，内容为我服务，目前我正在处理两个文件，Lesson.jsx 和 App.js。在 Lesson.jsx 文件中，我最终有一个 Lesson 组件和一些 Routers（这是因为我创建了一个侧边栏）然后我在 App.js 文件中的 App 函数中导入了 Lesson 组件，但是当我点击了一个侧边栏链接，我更新了页面，内容服务，为了清楚地了解问题，除了代码，我想另外提供一张图片

App.js

function App() {
    return (
        <ParallaxProvider>
            <div className="App">
                <Route path='/Lessons' render={() => <Lesson/>}/>
            </div>
        </ParallaxProvider>
    );
}

export default App;

课程.jsx

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Home from "./components/Example";
import './css/activeLink.css'

const routes = [
    {
        path: "/",
        exact: true,
        sidebar: () => null,
        main: () => <h2>Home1</h2>
    },
    {
        path: "/bubblegum",
        sidebar: () => null,
        main: () => <Home />,
    },
    {
        path: "/shoelaces",
        sidebar: () => null,
        main: () => <h2>Shoelaces</h2>
    }
];

function Lesson() {
    return (
        <Router>
            <div style={{ display: "flex" }}>
                <div className={"sidebar"}>
                    <ul style={{ listStyleType: "none", padding: 0 }}>
                        <li>
                            <Link to="/home">Home</Link>
                        </li>
                        <li>
                            <Link to="/bubblegum">Bubblegum</Link>
                        </li>
                        <li>
                            <Link to="/shoelaces">Shoelaces</Link>
                        </li>
                    </ul>

                    <Switch>
                        {routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                children={<route.sidebar />}
                            />

                        ))}
                    </Switch>
                </div>

                <div className={"sidebar_content"}>
                    <Switch>
                        {routes.map((route, index) => (
                            // Render more <Route>s with the same paths as
                            // above, but different components this time.
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                children={<route.main />}
                            />
                        ))}
                    </Switch>
                </div>
            </div>
        </Router>
    );
}

export default Lesson;

Answer 1

如果删除课程 }/>？或者为路由中的每条路径添加/Lessons？

无法使用 React Router 创建嵌套选项卡路由

1 个答案: