React Router 没有重定向到正确的页面，重定向到的页面是空的。 没有错误

Question

以下不工作：反应路由器“链接”不工作。

假设我们处于起点：“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

尝试添加“/”以使路径进入/api/pages/abc 。

并导入您要路由的文件。

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>

Answer 3

在代码中的“路径”之前添加“精确”。 并使用绝对路径

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

<Router>
    <Switch>
        <Route excat path="/api/pages/abc" component={MyPage} />
    </Switch>
</Router>