[英]Link of react-router-dom updates the URL without rendering the component
I'm using the react-router-dom Link component to manage my navigation but it doesn't work.我正在使用 react-router-dom 链接组件来管理我的导航,但它不起作用。 The Link changes the URL but doesn't render the component.
链接更改了 URL 但不渲染组件。 Here is a simple app describing my problem.
这是一个描述我的问题的简单应用程序。 I'm trying to use My App header as go home link:
我正在尝试使用我的应用程序 header 作为 go 主页链接:
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import React from 'react';
const Navigation = () => {
return (
<div>
<Link to="/events">
<h1>My Application</h1>
</Link>
</div>
);
};
const ConnectedNavigation = connect((state) => state)(Navigation);
export default ConnectedNavigation;
App.jsx code: App.jsx 代码:
import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../store/index';
import ConnectedDashboard from './Dashboard';
import ConnectedEventDetails from './EventDetails';
import { Router, Route } from 'react-router-dom';
import { history } from '../store/history';
import ConnectedNavigation from './Navigation';
export const Main = () => (
<Router history={history}>
<Provider store={store}>
<div>
<ConnectedNavigation />
<Route exact path="/events" render={() => <ConnectedDashboard />} />
<Route
exact
path="/event/:id"
//match prop is necessary in order to determine which event
//we are looking for
render={({ match }) => <ConnectedEventDetails match={match} />}
/>
</div>
</Provider>
</Router>
);
As you can see i added exact on my Routes to avoid any confusions如您所见,我在路线上添加了准确信息以避免任何混淆
This problem comes from this line:这个问题来自这一行:
import { Router, Route } from 'react-router-dom';
The correct import is:正确的导入是:
import { BrowserRouter as Router, Route } from 'react-router-dom';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.