通过路由器发送数据时遇到问题

Question

我在通过 React 路由器发送数据时遇到问题 我的数据来自 Wordpress REST API

首先是我的导航 function 从 Wordpress 读取，这是工作

<Link to={menus[ky].slug} params={{ pageId: menus[ky].post_name }}>{menus[ky].title}</Link>

接下来是我的应用程序 function 它使用 MyRoutes function 动态创建路由器然后我有我的页面组件，我需要从导航中获取数据。

basicallY I want to dynamically generate the URLs from Wordpress to keep SEO, then fetch the page HTML from REST API (Not built yet, still trying to pass the pageId)

这是所有的代码

import React, { Component, useState, useEffect } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    useLocation
} from 'react-router-dom';


function Nav() {
    
    const [menus, setMenus] = useState([]);
    
    useEffect(() => {
        fetch("https://dev.justinblayney.com/wp-json/menus/v1/menus/main-menu")
        .then(res => res.json())
    
        .then(json =>{
             setMenus(json.items)}
              )
        
       
         });
        
    
    return (
        
        <nav>
        <ul>
            {Object.keys(menus).map((ky, idx)=> (
             <li id={idx} key={idx}>
                <Link
                  to={{
                    pathname: menus[ky].slug,
                    state: {
                      pageId: menus[ky].post_name,
                    },
                  }}
                >
                  {menus[ky].title}
                </Link>
            </li>
        ))}
        </ul>
    </nav>
  
    );
}



function MyRoutes() {
    
    const [menus, setMenus] = useState([]);
    
    useEffect(() => {
        fetch("https://dev.justinblayney.com/wp-json/menus/v1/menus/main-menu")
        .then(res => res.json())
    
        .then(json =>{
             setMenus(json.items)}
              )
         });
        
    
    return (
        <>
            {Object.keys(menus).map((ky, idx)=> (
                <Route exact path={menus[ky].slug} component={Page}  key={idx} />
            ))} 
        </>
  
    );
}


class App extends Component {
    render() {
        return(
            
     <Router> 
        <div className="App">
            <Header />      
            <Nav />
                <Route exact path='/' component={Page} />
                <MyRoutes />
                
            <Footer />
   
         </div>
      </Router> 
    
        );  
    }
}

export default App;
    
    
  
function Page() {
  const { state: { params: { pageId } } } = useLocation();
  return (
    <div className="container-fluid">
      
    
      
      <h3>Requested page ID: {pageId}</h3>
      
      
     </div>
  );

}

export default Page;

Answer 1

您可以使用路由 state 从链路发送数据以及路由转换。

链接到：object

可以具有以下任何属性的 object：

• 路径名：表示要链接到的路径的字符串。
• search：查询参数的字符串表示。
• hash：A hash 放入 URL，例如#a-hash。
• state：State 坚持到该位置。

state是您感兴趣的属性。

在state属性上发送您希望接收Route和组件具有的数据。

<Link
  to={{
    pathname: menus[ky].slug,
    state: {
      params: {
        pageId: menus[ky].post_name,
      },
    },
  }}
>
  {menus[ky].title}
</Link>

要检索路线 state，可以从路线道具的位置object 访问。

location.state.params.pageId

有两种基本方法可以访问location object

通过props

1. this.props.location （基于类的组件）
2. props.location （功能组件）
3. 通过withRouter HOC 注入到 props 中，从 1 或 2 可用

通过useLocation反应钩子

1. const { state: { params: { pageId } } } = useLocation();

如果您在state和pageId之间没有其他要添加的内容，那么删除中间params属性并仅存储pageId可能更有意义。

<Link
  to={{
    pathname: menus[ky].slug,
    state: {
      pageId: menus[ky].post_name,
    },
  }}
>
  {menus[ky].title}
</Link>