<Link> <Router> React 中的外部错误消息

Question

我试图在我的路由中设置一个自定义历史对象，以便能够使用它的redux操作。我已经看到我们应该使用<Router>from'react-router'并在其中设置历史对象。我就是这么做的。

App.js

//** Import router */
import { Switch } from 'react-router-dom';
import { Router } from 'react-router';
import history from './hooks/useHistory';
const App = () => {
return (
<Router history={history}>
<MainNavigation />
<Switch>
<Routes />
</Switch>
</Router>
);
};
export default App;

MainNavigation.js

const MainNavigation = () => {
return (
<>
<div className='navigation'>
<ul>
<Link to='/'>
<li>Home</li>
</Link>
<Link to='/contact'>
<li>Contact</li>
</Link>
<Link to='/about'>
<li>A propos</li>
</Link>
<Link to='/user-profile'>
<li>Votre compte</li>
</Link>
</ul>
</div>
</>
);
};
export default MainNavigation;

最后，Routes.js

//** Import routers */
import { Redirect, Route } from 'react-router-dom';
const Routes = () => {
return (
<>
<Route path='/' exact component={MainLayout} />
<Route path='/about' exact component={About} />
<Route path='/contact' exact component={ContactForm} />
<Route path='/user-profile' exact component={UserAccount} />
<Redirect to='/' />
</>
);
};
export default Routes;

我不明白为什么它说你不应该在<Router>之外使用<Link>因为包含<link>(MainNavigation.js)的组件在<Router>标签内。

Answer 1

看起来你需要使用BrowserRouter或其他的一个根据这里的好答案:你不应该使用<</p> <lt;Router>

还有一件事:试着把你的li元素放在<Link>标签之外，这样你就有了ul > li > Link