Question

请参见下面的代码代码。我正在尝试在各个页面的状态内创建一个对象，以将其加载到路由器中。除了渲染，一切都很好，正如您在图像上看到的那样，我正在尝试加载。但这不允许我添加变量吗？如果我使用${item.name}，它将使用变量名，但所有变量名都应为字符串，例如“”。如何将其作为变量传递，以便在扩展状态时可以使用其他相对URL访问不同的页面。

import React, { Component } from 'react';
import PageTwo from '../Content/PageTwo/PageTwo';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

class Routes extends Component {
    constructor(props) {
        super();
        this.state = {
            items: [
                {
                    name: PageTwo,
                    url: '/test'
                }
            ]
        };
    }
    render() {
        return (
            <ul>
                {this.state.items.map((item, index) => (
                    <Route
                        exact
                        name={item.name}
                        path={item.url}
                        render={(props) => (
                            <{item.name}/>
                        )}
                    />
                ))}
            </ul>
        );
    }
}

export default Routes;

Answer 1

如我所知，您想为路径<PageTwo />渲染组件'/test'。但是，您不能像在<{item.name} />中那样使用组件名称。

相反，您可以在对象中存储路径和组件名称的映射，并按如下方式使用它：

const Components = {
test: PageTwo
};
const MyComponent = Components[item.url];
return <MyComponent />;

反应路由器。我想遍历添加组件的各种链接

1 个答案: