Reactjs 使用参数时，React Router渲染道具不是渲染组件

这是我在Stackoverflow的第一篇文章，希望你们能给我一些指导

我目前正在学习React路由器，似乎我遇到了一个无法解决的错误或bug。为了让您对设置有一点了解，这里是：

我将CRA与React路由器DOM 5.0.1一起使用。 我正在使用React挂钩进行练习，并使用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;

import React，{Fragment，useState，useffect}来自'React'；
从“react router dom”导入{BrowserRouter，Link，Route，Switch}；
从“axios”导入axios；
从“/Writers”导入写入程序；
函数App（）{
const[writers，setWriters]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios（'http://localhost:3004/writers');
setWriters（结果数据）；
};
fetchData（）；
}, []);
返回(


家


作家


主页}/>
}
/>
);
}
导出默认应用程序；

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;

import React，{Fragment}来自'React'；
从'react router dom'导入{Route，Link}；
从“/Writer/index”导入Writer；
const Writers=props=>{
控制台日志（道具）；
返回(

{props.writers.map（{id，name}）=>(

{name}

))}

}
/>
);
};
导出默认写入程序；

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;

import React，{Fragment}来自'React'；
常量编写器=（{match，id，name，description}）=>{
控制台日志（匹配）；
返回id名称描述；
};
导出默认编写器；

因此，我在Writers.js中遇到了一个问题，在这里我传递参数“/：writerID”，这个参数不能到达Writer组件，实际上Writer组件根本不会被渲染

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

}
/>

如果我从路径属性中删除：writerID，组件编写器将被渲染，但它不允许我将其路由到我正在寻找的唯一路径

知道为什么会这样吗？任何帮助都将不胜感激

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

App.js使用道具和编剧数据传递编剧

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

}
/>

Writers.js接收数据和路由道具，因此我可以访问匹配道具，但此组件不呈现Writer组件，也不获取Match.params道具

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

}
/>

预期行为：当尝试单击任何单个Writer时，Writer.js应该被渲染，它应该允许我获得match.params属性

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

---

实际行为：Writer.js不会被渲染，如果我从路由中删除路径道具，它会被渲染，但我无法访问单个id。

在

/writers

的路由路径中，您使用的是确切的道具，这将导致任何嵌套路由都不会被渲染。移除准确的道具，你的路线就会生效

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

}
/>

---

另外，作为一条经验法则，您应该在

/writers

的路由路径中使用

match.url

作为

链接

路径，在

/writers

的路由路径中使用

match.path
作为
路径，这将导致任何嵌套的路由都无法呈现。移除准确的道具，你的路线就会生效

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

}
/>

另外，作为一个经验法则，您应该使用
match.url
作为
链接
路径，使用
match.path
作为
路线
路径
非常感谢！！我能够解决这个问题，并感谢您对match.url和match.path的建议。我现在将更改它们。非常感谢！！我已经解决了这个问题，谢谢你对match.url和match.path的建议，我现在就更改它们。