react-router 如何从数组生成路由？

Posted 2023-02-22

【中文标题】react-router 如何从数组生成路由？

【英文标题】：How react-router works on generating the routes from an array?

【发布时间】：2021-03-29 00:06:57

【问题描述】：

那么基本上 react-router 是如何从数组生成路由的？我一直在构建这个食谱应用程序，但生成路线让我陷入了困境。由于某种原因，没有创建路线，所以当我点击配方链接时，它会将我重定向到空白页面而不显示内容。

Full github code

App.js

import RecipeList from './RecipeList';
import './App.css';
import RecipeProvider from './RecipeContext'
import Form from './Form';
import BrowserRouter as Router, Switch, Route from 'react-router-dom'
import RecipeContext from './RecipeContext';
import useContext from 'react';
import Details from './Details';

function App() 

  const [recipes,setRecipes]=useContext(RecipeContext) 
  
  return (


<RecipeProvider>

<Router>
<Switch>
  

<>
<Route exact path="/">
<RecipeList/>
</Route>
<Route exact path="/pridat-recept">
<Form/>
</Route>

recipes.map(item=>(
  
<Route exact path=`/$item.name` >
<Details key=item.name/>
</Route>

)

)



</>
</Switch>
</Router>

</RecipeProvider>

  );


export default App;

食谱.js

import React from 'react'
import Image from "./vitaminDfood-1132105308-770x553.jpg"
import './Recipe.css'
import Link from 'react-router-dom'
import Details from './Details';
function Recipe(props) 
    return (
        <div className="recipe">
        <div className="first-column">
        <img src=Image />
        </div>
        <div className="second-column">
     <Link to=`/$props.name`><p className="name">props.name</p></Link> 
       <p> props.score.toFixed(2)</p>
       <p className="time"><i className="far fa-clock"></i>props.duration<span>min.</span></p> 
        </div>
        </div>
    )


export default Recipe

Details.js

import RecipeContext from './RecipeContext';
import useContext from 'react';
import './Details.css'
import React,useEffect,useState from 'react';
import axios from 'axios';


function Details() 

  return (
    <h1>hry</h1>
    )


export default Details;

【参考方案1】：

你可以使用 map() 方法来渲染数组中的每个项目或对象。渲染后，您可以将其生成到来自数组 id 的链接。

这是您可以使用 id 将 react-router 从数组中放入的选项。

【讨论】：

没看懂，我已经在用map方法了，能多解释一下吗？