React 链接更新 URL 但页面没有更改/呈现

Question

我将一个标题导入到下面的 main.jsx 文件中，作为一个简单组件 (SFC)，它充当导航菜单。一切看起来都很好，单击菜单会更新浏览器中的 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 正在加载同一页面。我很快就认为我遇到了一个复杂的问题，并在它实际上是一个非常简单的问题时开始研究 Blocked Components 和 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} />

另外，用 BrowserRouter 包围它