React路由器未重定向到右侧页面，重定向到的页面为空.没有错误

Question

以下内容不起作用：React路由器"；链接"；不起作用。

让我们说，我们正处于一个起点：；localhost:3000/api/pages"；。

当我点击下拉项时，链接是："；localhost:3000/api/pages/api/pages/abc"；。

应该是："；localhost:3000/api/pages/abc">

我没有在控制台中显示任何错误，但是，它没有实现所需的行为。它没有重定向到右侧页面。

**当我通过输入它的URL转到右边的页面时，它是空的。

然而，当我在测试页面时没有使用任何React Router路由时，页面运行良好，所以我认为问题出在路由**上

import { Link } from 'react-router-dom';
import { Dropdown } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
class MyPage extends React.Component{
render(){
return(
<Dropdown.Menu>
<Dropdown.Item as={Link} to="api/pages/abc">
<FontAwesomeIcon icon={faEdit} className="me-2"  /> Edit
</Dropdown.Item>
</Dropdown.Menu>
);
}
}
export default MyPage;

在另一个文件中：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="api/pages/abc" component={MyPage} />
</Switch>
</Router>

可能是什么问题？

Answer 1

to="api/pages/abc"将相对于当前路径进行链接。使用绝对路径应该会有所帮助：to="/api/pages/abc"

Answer 2

添加"精确的"；在"；路径"；在您的代码中。并使用绝对路径

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route excat path="/api/pages/abc" component={MyPage} />
</Switch>
</Router>

Answer 3

尝试添加"以使路径进入CCD_ 3。

并导入要路由的文件。

import MyPage from './the/path/of/the/file';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/api/pages/abc" component={MyPage} />
</Switch>
</Router>