实现导航菜单的路由配置，点击菜单项路由配置中的组件在右侧主体区域显示。

假设你在使用 React 框架和 React Router 库，你可以按照以下步骤来实现导航菜单的路由配置：

1. 安装 React Router 库：

npm install react-router-dom

2. 在你的应用程序中引入 React Router：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

3. 创建一个包含导航菜单和主体区域的组件，例如 `Layout` 组件。

import React from "react";
import { Link } from "react-router-dom";

const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <main>{children}</main>
    </div>
  );
};

export default Layout;

4. 创建每个菜单项对应的组件，例如 `Home`、`About` 和 `Contact` 组件，以及一个默认的组件，例如 `NotFound` 组件。

import React from "react";

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

import React from "react";

const About = () => {
  return <h1>About</h1>;
};

export default About;

import React from "react";

const Contact = () => {
  return <h1>Contact</h1>;
};

export default Contact;

import React from "react";

const NotFound = () => {
  return <h1>Not Found</h1>;
};

export default NotFound;

5. 在 `App` 组件中使用 `Router`，并根据路由路径渲染对应的组件。

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import NotFound from "./NotFound";

const App = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
      </Layout>
    </Router>
  );
};

export default App;

在这个例子中，当用户点击导航菜单中的菜单项时，URL 路径会改变，并且对应的组件会在主体区域中显示。如果用户访问了不存在的路由路径，会显示默认组件 `NotFound`。