React Router 中的链接未重定向到页面

Question

The NavLink is not redirecting to the specified page: "api/pages/abc":

import { BrowserRouter as Link } from 'react-router-dom';
class MyPage extends React.Component{
    render(){
        return(
            <Dropdown.Menu>
                <Link to="api/pages/abc">
                     <Dropdown.Item >
                        Edit
                     </Dropdown.Item>
                 </Link>
            </Dropdown.Menu>
        );
    }
}

export default MyPage;

in another file:

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


    

What might be the problem, why it is not redirecting to the specified page: "api/pages/abc"?

Answer 1

You are import Link wrong, Instead of this

import { BrowserRouter as Link } from 'react-router-dom';

use this

import { Link } from "react-router-dom";

docs: https://reactrouter.com/web/guides/quick-start