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

Question

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

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

SRC /组件/布局/ 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

您错过了关键字“精确”，请将路由器更改为：

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

另外，用BrowserRouter包围它