以下不起作用: 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>
可能是什么问题?
答案 0 :(得分:3)
to="api/pages/abc"
将相对于当前路径进行链接。
使用绝对路径应该会有所帮助:to="/api/pages/abc"
答案 1 :(得分:1)
尝试添加“/”使路径变为 df1$Last
。
并导入您要路由的文件。
/api/pages/abc
答案 2 :(得分:0)
在代码中的“path”之前添加“exact”。并使用绝对路径
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route excat path="/api/pages/abc" component={MyPage} />
</Switch>
</Router>