使用参数时，React Router Render props 不渲染组件

Posted 2023-02-24

【中文标题】使用参数时，React Router Render props 不渲染组件

【英文标题】：React Router Render props is not rendering component when using params

【发布时间】：2019-10-31 16:35:40

【问题描述】：

这是我在 *** 的第一篇文章，希望大家能给我一些指导。

我目前正在学习 React Router，似乎遇到了一个我无法解决的错误或错误。为了让您大致了解设置，这里是：

我正在使用带有 React-Router-DOM 5.0.1 的 CRA。 我正在使用 React Hooks 练习和使用最新版本的 React 16.8.6

这是一个读取本地 API 并将其数据呈现​​在不同组件上的应用。代码如下：

App.js

import React,  Fragment, useState, useEffect  from 'react';
import  BrowserRouter, Link, Route, Switch  from 'react-router-dom';
import axios from 'axios';

import Writers from './Writers';

function App() 
  const [writers, setWriters] = useState([]);

  useEffect(() => 
    const fetchData = async () => 
      const result = await axios('http://localhost:3004/writers');
      setWriters(result.data);
    ;

    fetchData();
  , []);

  return (
    <BrowserRouter>
      <Fragment>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/writers'>Writers</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path='/' render=() => <div>Home</div> />
          <Route
            exact
            path='/writers'
            render=props => <Writers ...props writers=writers />
          />
        </Switch>
      </Fragment>
    </BrowserRouter>
  );


export default App;

Writers.js

import React,  Fragment  from 'react';
import  Route, Link  from 'react-router-dom';
import Writer from './Writer/index';

const Writers = props => 
  console.log(props);
  return (
    <Fragment>
      <ul>
        props.writers.map(( id, name ) => (
          <li key=id>
            <Link to=`$props.match.url/$id`>name</Link>
          </li>
        ))
      </ul>

      <Route
        path=`$props.match.url/:writerID`
        render=props => <Writer ...props />
      />
    </Fragment>
  );
;

export default Writers;

Writer.js

import React,  Fragment  from 'react';

const Writer = ( match, id, name, description ) => 
  console.log(match);
  return <Fragment>id name description</Fragment>;
;

export default Writer;

所以我在 Writers.js 中遇到问题，我正在传递参数“/：writerID”，这个参数没有到达 Writer 组件，实际上 Writer 组件根本不会被渲染

<Route
        path=`$props.match.url/:writerID`
        render=props => <Writer ...props />
      />

如果我从 path 属性中删除 :writerID，组件 Writer 会被渲染，但它不允许我将它路由到我正在寻找的唯一路径。

知道为什么会发生这种情况吗？任何帮助将不胜感激。

我已尝试确保我的文件具有正确的导出，事实上，我没有从 CRA 日志中看到任何错误。 另外，我从路径道具中删除了参数，似乎 Writer 组件呈现，但如果我再放一次，它就不起作用了。

App.js 传递带有 props 和 writers 数据的 Writers

<Route
            exact
            path='/writers'
            render=props => <Writers ...props writers=writers />
          />

Writers.js 接收数据和 Route 道具，因此我可以访问 Match 道具，但此组件不呈现 Writer 组件也没有获取 match.params 道具。

<Route
        path=`$props.match.url/:writerID`
        render=props => <Writer ...props />
      />

预期行为：Writer.js 应该在尝试点击任何单个作家时呈现，它应该允许我获得 match.params 属性。

实际行为：Writer.js 没有被渲染，如果我从 Route 中删除 path 属性，它会被渲染，但我无法访问单个 id。

【参考方案1】：

在/writers 的 Route 路径中，您使用的是确切的 prop，这将导致任何嵌套的 Route 都不会被渲染。删除确切的道具，您的路线将起作用

<Route
        exact
        path='/writers'
        render=props => <Writers ...props writers=writers />
      />

此外，您应该将match.url 用于Link 路径，将match.path 用于Route 路径

【讨论】：

非常感谢！！我能够解决这个问题，感谢您对 match.url 和 match.path 的建议，我现在将更改它们。