反应链接更新网址，但页面没有改变/呈现

Question

我正在将标头作为充当导航菜单的简单组件(SFC(导入下面的main.jsx文件。一切看起来都很好，单击菜单确实会更新浏览器中的URL。但是，应用程序不会更改页面。我已经用谷歌搜索了一下，遇到了各种帖子，建议它与阻止更新有关，但我不知道如何解决它。

完整来源在这里： https://github.com/infornite/n4nite-react-ui-aug-2018

src/component/layout/header.tsx

import * as React from 'react'
import { Link } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import '../../style/index.less';
const { Header } = Layout;
interface HeaderProps {
className?: string
}
const nHeader: React.SFC<HeaderProps> = () => (
<Header>
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">
<Link to="/">Index</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/register">Register</Link>
</Menu.Item>
</Menu>
</Header>
)
export default nHeader

src/routes.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import IndexPage from './pages'
import RegisterPage from './pages'
const Routes: React.SFC = () => (
<Switch>
<Route exact path="/" component={IndexPage} />
<Route path="/register" component={RegisterPage} />
<Route component={() => <div>Not Found</div>} />
</Switch>
)
export default Routes

src/main.tsx

import * as React from 'react'
import { Provider, connect } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import { Store } from 'redux'
import { History } from 'history'
import Routes from './routes'
import { ApplicationState } from './store'
import { Layout } from 'antd'
import './style/index.less';
import Header from './components/layout/header'
import Breadcrumb from './components/layout/breadcrumb'
import Footer from './components/layout/footer'
const { Content } = Layout;
// Separate props from state and props from dispatch to their own interfaces.
interface PropsFromState {
}
interface PropsFromDispatch {
[key: string]: any
}
// Any additional component props go here.
interface OwnProps {
store: Store<ApplicationState>
history: History
}
// Create an intersection type of the component props and our Redux props.
type AllProps = PropsFromState & PropsFromDispatch & OwnProps
class Main extends React.Component<AllProps> {
public render() {
const { store, history } = this.props
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Layout className="layout">
<Header />
<Content style={{ padding: '0 50px' }}>
<Breadcrumb />
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
<Routes />
</div>
</Content>
<Footer/>
</Layout>
</div>
</ConnectedRouter>
</Provider>
)
}
}
// It's usually good practice to only include one context at a time in a connected component.
// Although if necessary, you can always include multiple contexts. Just make sure to
// separate them from each other to prevent prop conflicts.
const mapStateToProps = () => ({
})
// Normally you wouldn't need any generics here (since types infer from the passed functions).
// But since we pass some props from the `index.js` file, we have to include them.
// For an example of a `connect` function without generics, see `./containers/LayoutContainer`.
export default connect<PropsFromState, PropsFromDispatch, OwnProps, ApplicationState>(
mapStateToProps
)(Main)

Answer 1

这个问题是我的一个愚蠢的错误，因为我将同一页面(例如我的索引页面(导入为索引页面和注册页面。一切实际上都运行良好，但由于这个错误，当我转到任一链接时，React 正在加载相同的页面。我太快地假设我有一个复杂的问题，并开始查看阻塞组件和HOC，而这实际上是一个非常简单的问题。

错误：src/routes.tsx

import IndexPage from './pages'
import RegisterPage from './pages'

正确：src/routes.tsx

import IndexPage from './pages/index'
import RegisterPage from './pages/register'

Answer 2

如果您错过了关键字"exact"，请将路由器更改为：

<Route exact path="/register" component={RegisterPage} />

另外，用浏览器路由器包围它