это мой первый пост в Stackoverflow, и я надеюсь, что вы, ребята, можете дать мне некоторые рекомендации.
В настоящее время я изучаю React Router, и мне кажется, что я застрял на ошибке или ошибке, которую не могу найти, чтобы решить. Чтобы дать вам небольшой обзор настройки, вот она:
Я использую CRA с React-Router-DOM 5.0.1.
Я использую 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} />}
/>
Если я удаляю: writerID из реквизита пути, компонент Writer визуализируется, НО это не позволяет мне направлять его по уникальному пути, который я ищу.
Есть идеи, почему это может происходить? Любая помощь будет принята с благодарностью.
Я пытался убедиться, что мои файлы экспортированы правильно, и они, по сути, не видят ошибок в журналах CRA.
Кроме того, я удаляю params из реквизитов пути, и кажется, что компоненты Writer рендерится, но если я добавлю его снова, он не будет работать.
App.js передает 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, он обрабатывается, но я не могу получить доступ к индивидуальному идентификатору.