我想获得 useParams 值,但是我获得了一个未定义的值...我不知道为什么,因为我在 path='/investment/:id'
中使用了 params id
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import AdminLayout from 'layouts/Admin/Admin.js';
import 'assets/scss/black-dashboard-react.scss';
import 'assets/demo/demo.css';
import 'assets/css/nucleo-icons.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import ThemeContextWrapper from './components/ThemeWrapper/ThemeWrapper';
import BackgroundColorWrapper from './components/BackgroundColorWrapper/BackgroundColorWrapper';
import InvestmentDetails from 'views/InvestmentDetails';
ReactDOM.render(
<ThemeContextWrapper>
<BackgroundColorWrapper>
<BrowserRouter>
<Switch>
<Route path='/investment/:id' exact component={InvestmentDetails} />
<Route path='/admin' render={(props) => <AdminLayout {...props} />} />
<Redirect from='/' to='/admin/dashboard' />
</Switch>
</BrowserRouter>
</BackgroundColorWrapper>
</ThemeContextWrapper>,
document.getElementById('root')
);
// InvestmentDetails.js
import React, { useEffect } from 'react';
import { fetchInvestments } from 'services/Investments';
import { Col, Row } from 'reactstrap';
import { useParams } from 'react-router-dom';
const InvestmentDetails = () => {
const { id } = useParams();
useEffect(() => {
const getInvestmentDetails = async () => {
const investment = await fetchInvestments(id);
console.log(id);
};
getInvestmentDetails();
}, []);
return (
<>
<div className='content'>
<Row>
<Col md='12'>
<h1>{id}</h1>
</Col>
</Row>
</div>
</>
);
};
export default InvestmentDetails;
// the fetchInvestments function
export async function fetchInvestments(id = '') {
const response = await fetch(`http://localhost:3000/products/${id}`);
return await response.json();
}
希望大家能帮帮我
答案 0 :(得分:0)
编辑。
查看您的代码,我认为问题与您的 API 调用有关。我认为您应该指向端口 5000 而不是 3000,因为我看到您在 app.js 中提到了它
原创。
我真的没有发现这有什么问题,因为我以前写过这样的代码。我唯一能想到的改变是编写您的使用效果,将 id 作为依赖项包含在内,以便它仅在有 id 时运行。
useEffect(() => {
const getInvestmentDetails = async () => {
const investment = await fetchInvestments(id);
console.log(id);
};
getInvestmentDetails();
}, [id]);
答案 1 :(得分:0)
在搜索您的代码后,我没有看到任何导航到“/investment/:id”路径的内容,但发现 investimentos
选项卡呈现 InvestmentList
组件并链接到 {{ 1}} 路径。我还发现 "/admin/investment/:id"
组件似乎为 Admin
中定义的任何路由添加了 "/admin"
前缀,这些路由指定了 routes.js
的布局值。
当我手动点击“/investment/:id”路径(即 "/admin"
)时,我能够看到路线 "/investment/1234"
参数(即 { {1}}) 在 id
组件中。
我认为你的路由器只需要更新它试图匹配的投资细节的路径。
routes.js
1234
InvestmentList 投资链接:
InvestmentDetails
index.js with router:更新路径前缀以包含 {
path: '/investment/',
name: 'Novo Investimento',
// rtlName: 'لوحة القيادة',
icon: 'tim-icons icon-wallet-43',
component: InvestmentDetails,
layout: '/admin',
},
<Link to={`/admin/investment/${inves.id}`}>
{inves.name}
</Link>