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

Question

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

我目前正在学习 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。

Answer 1

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

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

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