javascript - React Route - 点击链接的问题

Question

我有一个奇怪的问题我正在使用侧边栏，用户可以通过单击看起来像这样的特定链接转到所需的选项卡

今天我注意到我可以使用某个选项来缩短我的代码，现在我将解释一切。

目前，我的项目结构如下所示

SideBarItems.js

const SidebarItems = [
    { CourseTopic: "Introduction" },
    "Introduction",
    "Creating Your First Javascript",
    "Comments",
    "Let",
    "Variables",
    "Data Types",
].map((itemName) => {
    if (typeof itemName === "string") {
        return {
            name: itemName,
            CourseTopic: itemName.CourseTopic || "",
            route: `/${itemName}`,
        };
    } else {
        return {
            name: itemName.name,
            CourseTopic: itemName.CourseTopic,
            route: `/${itemName.names}`,
        };
    }
});

export default SidebarItems;

路由.js

function RoutesPage(props) {
    const {path} = props.path;
    const {location} = props.location.pathname;

    const routes = [
    {path: `${path}/Introduction`, component: () => <Introduction SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Creating Your First Javascript`, component: () => <CreatingFirstJS SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Comments`, component: () => <Comments SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Let`, component: () => <Let SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Variables`, component: () => <Variables SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Data Types`, component: () => <DataTypes SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Objects`, component: () => <Objects SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Events`, component: () => <Events SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Strings`, component: () => <Strings SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/String Methods`, component: () => <StringMethods SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: `${path}/Intro to ES6`, component: () => <Intro SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    ];

    return (
        <>
            <Switch>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.component}
                    />
                ))}
            </Switch>
        </>
    );
}

export default RoutesPage;

请注意Path，Path将字符串“”同步，Lesson然后我分配字符串Introduction，，，Comments让等等，也就是说，结果是“ Lesson/Let”或“ Lesson/Introduction”等等，一切对我来说都很好。我可以点击链接，一切都很棒。

但是今天我注意到没有必要手动编写路径，因为我已经将所有路径都存储在里面了location，这是图片。

当然，我决定使用pathnamefromlocation我适当地替换了我的代码

const {pathname} = props.location.pathname;

const routes = [
    {path: pathname, component: () => <Introduction SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: pathname, component: () => <CreatingFirstJS SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
    {path: pathname, component: () => <Comments SideBarThemeValue={SideBarThemeValue} AlertStyleBG={AlertStyleBG}/>},
];

之后，当我尝试点击链接时，我的 url 发生了变化，即 url 有效，但没有显示内容，我无法理解这个原因。

标签： javascriptreactjsreact-routerreact-router-dom