与路由交换机的绑定状态

Question

我正在构建一个React应用程序，该应用程序从API调用中获取JSON数据，并将响应提供给名为菜单[]的应用程序状态，如下所示：

App.js

import React,{Component} from 'react';
import Menus from './components/menus';

class App extends Component {

  state = {
    menus: []
  }
  componentDidMount(){
    fetch('api url')
    .then(res => res.json())
    .then((data)=> {
      this.setState({menus: data})
    })
    .catch(console.log)
  }
  render(){
  return (
    <div>    
    <Menus menus={this.state.menus} />
    </div>
  );
}
}

export default App;

我在一个包含路由开关的简单组件中使用状态，如下所示：

Menus.js

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

const Menus = ({ menus }) => {
  return (
      <Router>
    <div>
      <center><h1>Lessons</h1></center>
      {menus.map((menu) => (

            <li><Link to="{{menu.lessonContent}}">{menu.lessonName}</Link></li> 

      ))}
       <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
    </div>
    </Router>
  )
};
function Child() {
    // We can use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();

    return (
      <div>
        <h3>ID: {id}</h3> //content should show up here
      </div>
    );
  }

export default Menus

是否有一种将状态元素绑定到路由的方法，以便传递json响应的不同部分而不是路由？我可以使用一个键并以某种方式将它与一个元素结合起来吗？

以下是最初的链接：

<li><Link to="/route">{menu.lessonName}</Link></li>

我想要的是：

<li><Link to="{{menu.lessonContent}}">{menu.lessonName}</Link></li>

Answer 1

如果我正确地理解了您正在尝试实现的目标，我认为您的Menus组件应该更像这样：

Menus.js

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

const Menus = ({ menus }) => {
  return (
    <Router>
      <div>
        <center>
          <h1>Lessons</h1>
        </center>
        {menus.map(menu => (
          <li key={menu.id}>
            <Link to={`/${menu.id}`}>{menu.lessonName}</Link>
          </li>
        ))}
        <Switch>
          {menus.map(menu => (
            <Route
              key={menu.id}
              path="/:id"
              children={<Child content={menu.content} />}
            />
          ))}
        </Switch>
      </div>
    </Router>
  );
};
function Child({ content }) {
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
      <div>{content}</div>
    </div>
  );
}

export default Menus;

以下是我在这里修正的一些东西：

1. 在您的示例中，您将一个字符串而不是一个对象键传递给to支柱：to="{{menu.lessonContent}}"而不是to={menu.lessonContent}
2. 我正在menus上映射，以便动态创建Route组件及其相应的路径。
3. 我将menu.content作为Child组件的支柱。
4. 我将关键字添加到每个呈现的元素中，这是迭代的结果。