React链接更新URL，但页面未更改/呈现

Question

I am importing a header into the main.jsx file below as a simple component (SFC) that acts as a navigation menu. Everything looks fine and clicking on the menu does update the URL in the browser. However the application does not change page. I have googled a bit and come across various posts suggesting its related to a blocking update but I don't know how to fix it.

Full source is here: 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

The issue was a silly mistake on my part where I was importing the same page (eg my Index page) as both the index page and the register page. Everything was actually working fine but because of this mistake React was loading the same page when I went to either link. I was too quick to assume I had a complex problem and started looking at Blocked Components and HOC's when it was actually a very simple issue.

Wrong: src/routes.tsx

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

Correct: src/routes.tsx

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

Answer 2

you've missed the keyword "exact", change your router to:

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

also, surround it with BrowserRouter