如何在反应路由器中使用地图功能？

Question

我有一个 pageNames 列表和一个 pageUrls 列表。我想创建一个路由器，为列表中的每个页面生成一个反应组件，并使用带有路由器链接的导航栏。我认为问题出在 forEach 函数上，但我不确定。

谁能告诉我我做错了什么？

虽然我觉得它没有帮助，here is a similar question。

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

function App() {

  const routes = [
    {
      name: 'home',
      path: '/'
    },
    {
      name: 'blog',
      path: '/blog'
    }
  ]

  // translate (map) your array of objects into jsx
  const routeComponents = routes.map(({name, path}) => ((
    <Route key={name} path={path}>
      <h1>{name}</h1>
    </Route>
  )))
  
  return (
    <div className="App" >
      <Router>
        <Navbar routes = {routes} />
        <Switch>
          {routeComponents}          
        </Switch>
      </Router>
    </div>
  );
}

export default App;

function Navbar(props){
  const links = props.routes.map(({name, path}) => (
    <Link key={name} to={path}>{name}</Link>
  ))
    return(
        <div style={{justifyContent: "space-around", margin:"auto", display:"flex",justifyContent:"space-around",backgroundColor:"red"}}>
            {links}
        </div>
    )
}

Answer 1

您可能看到的问题是由Switch 组件的工作方式引起的。它呈现第一个匹配Route 或Redirect 组件。这意味着在Switch 组件路径中的顺序和特异性很重要！主路径"/" 匹配任何路径，因此总是会被匹配和渲染。

您可以通过将路由从更具体到不太具体重新排序来避免这种情况，或者由于您暗示希望路由从用户交互中动态生成并存储在某个状态中，因此请为所有路由指定 exact 属性匹配发生完全并且顺序和特异性被否定。

function App() {
  const routes = [
    {
      name: 'home',
      path: '/',
    },
    {
      name: 'blog',
      path: '/blog',
    },
  ];

  const routeComponents = routes.map(({name, path}) => (
    <Route key={name} exact path={path}> // <-- exact prop to exactly match paths
      <h1>{name}</h1>
    </Route>
  ));
  
  return (
    <div className="App" >
      <Router>
        <Navbar routes={routes} />
        <Switch>
          {routeComponents}          
        </Switch>
      </Router>
    </div>
  );
}

Answer 2

你是对的。 forEach 正在填充您的 routes 变量，这是一个数组。你想要的是构建一些 JSX。这通常通过map 完成。您也不需要 useState 调用，您需要将页面名称和 url 合并到一个对象中以便于管理。

这里有一些伪代码会让你走上正轨……

  const routes = [
    {
      name: 'hello',
      path: '/'
    },
    {
      name: 'there',
      path: '/there'
    }
  ]

  // translate (map) your array of objects into jsx
  const routeComponents = routes.map(({name, path}) => (
    <Route key={name} path={path}/>
  ))

  // routeComponents is JSX. You originally had an array of JSX
  <Switch>
    {routeComponents}          
  </Switch>

  // Same thing for your links
  const navbar = routes.map(({name, path}) => (
    <Link key={name} to={path}>{name}</Link>
  ))

  <div>
    {navbar}          
  </div>

更新 上面示例中的一些调整以澄清它。

更新 #2 这是完整的代码（卡在 1 个文件中）。 更新为响应路由器 v6。 test it here

import "./styles.css";

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function Navbar({ routes }) {
  const links = routes.map(({ name, path }) => (
    <Link key={name} to={path}>
      {name}
    </Link>
  ));
  return (
    <div
      style={{
        justifyContent: "space-around",
        margin: "auto",
        display: "flex",
        justifyContent: "space-around",
        backgroundColor: "red"
      }}
    >
      {links}
    </div>
  );
}

export default function App() {
  const routes = [
    {
      name: "home",
      path: "/"
    },
    {
      name: "blog",
      path: "/blog"
    },
    {
      name: "about",
      path: "/about"
    }
  ];

  // translate (map) your array of objects into jsx
  const routeComponents = routes.map(({ name, path }) => (
    <Route key={name} path={path} element={<h1>{name}</h1>} />
  ));

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Router>
        <Routes>{routeComponents}</Routes>
        <Navbar routes={routes} />
      </Router>
      {Outlet}
    </div>
  );
}