在數組中進行迭代

Question

這可能是一個非常簡單的問題，但我無法解決這個問題。

此代碼用於生成側面菜單。 現在這只是許多嘗試中的最后一次，但是由於側面菜單很大，我想以某種方式使它的生成自動化，但是無論我做什么，我都無法遍歷數組來生成鏈接。

class App extends Component {
render() {
    return (
        <Router>
            <div style={{ display: 'flex' }}>
                <div style={{
                    padding: '10px',
                    width: '40%',
                    background: '#f0f0f0'
                }}>
                    <ul style={{ listStyleType: 'none', padding: 0 }}>
                        routes.forEach(route => {
                            <li><Link to={route.path}>{route.title}</Link>/li>
                        });
                    </ul>

                    {routes.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                        />
                    ))}
                </div>
                <div style={{ flex: 1, padding: '10px' }}>
                    {routes.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                            component={route.main}
                        />
                    ))}
                </div>
            </div>
        </Router >
    )
}
}

這可能是最糟糕的嘗試，但那是一種絕望的嘗試。

Answer 1

嘗試：

routes.map(route => (<li key={route.path}> <Link to={route.path}>{route.title}</Link> </li>));