Question

我有一个带有导航，主要部分和页脚的应用程序，我使用的是react-router-dom。导航由Navlink组成。页脚由Link组成。网站的主要部分应该是对所有路由器进行分组。

我希望能够在点击导航和页脚链接时获取页面。它们都应该呈现给app的主要部分。

我将路线表示为2个物体。

查看主要组件。是否可以映射这些对象并以这种方式获得多条路径？

import React from "react";
import ReactDOM from "react-dom";
import {HashRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const Home = () => <h1>Welcome to the company</h1>;
const Service = () => <h1>We are providing quality services</h1>;
const Delivery = () => <h1>Delivery time is about ten days</h1>;
const Contacts = () => <h1>Please call me during working hours</h1>;
const Partners = () => <h1>Our partners are biggest manufacturers</h1>;
const Information = () => <h1>Please read that info</h1>;
const Tags = () => <h1>Here is the tag list</h1>;
const About = () => <h1>Some info about photos</h1>;
const More = () => <h1>To find out more please read that</h1>;

/**
 * Navigation
 */

var linkStyle = { display: 'inline-block', float: 'left' };
var navigationStyle = { height: '45px', lineHeight: '45px' };

const menus = [
    {path: '/', component: Home, name: 'Home' }, 
    {path: '/service', component: Service, name: 'Service' }, 
    {path: '/delivery', component: Delivery, name: 'Delivery' },
    {path: '/contacts', component: Contacts, name: 'Contacts' }, 
    {path: '/partners', component: Partners, name: 'Partners' },
    {path: '/information', component: Information, name: 'Information' }
];



function Navigation() {
  const listItems = menus.map(({path, component, name}, key) => <li style={linkStyle} key={key}><NavLink activeStyle={{outline:'none', color: 'red'}} to={path}>{name}</NavLink></li> );
  return (
    <div style={navigationStyle}><ul>{listItems}</ul></div>
  );
}

/**
 * Footer
 */

const routes = [
    {path: '/tags', component: Tags, name: 'Tags' }, 
    {path: '/about', component: About, name: 'About' }, 
    {path: '/more', component: More, name: 'More' }
];


function FooterList() {
  const listItems = routes.map(({path, component, name}, key) => <li key={key}><Link to={path}>{name}</Link></li> );
  return (
    <ul>{listItems}</ul>
  );
}


function Main()  {
    const routeComponents = routes.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
    const menuComponents = menus.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
    return (
      <Switch>{routeComponents}{menuComponents}</Switch>
    );
}

const App = (props) => {
    return (
        <div>
            <Navigation />
            <Main />
            <FooterList />
        </div>
    );
}

ReactDOM.render(<HashRouter><App/></HashRouter>, document.getElementById('root'));

Answer 1

function Main()  {
    const routeComponents = routes.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
    const menuComponents = menus.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
    const allComponents = routeComponents.concat(menuComponents);
    return <Switch>{allComponents}</Switch>;
}

// To combine and THEN map
const routeComponents = ( routes.concat(menus) ).map( ({ path, component }, key ) => <Route exact path={path} component={component} key={key} />);

将导航和页脚路径组合到一个位置

1 个答案: