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

尝试添加“/”使路径变为 df1$Last。

并导入您要路由的文件。

/api/pages/abc

Answer 3

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

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

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

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

3 个答案: