Question

我正在使用react typescript模板创建一个Web应用程序，我正在尝试让react-router-dom正确路由我的模块。当我单击按钮切换模块时，没有任何反应。它只是将#键附加到URL的末尾。

我忘了做什么？

这是我的app.tsx及相关代码：

import * as React from 'react';
import Routes from 'app/routes';

export class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="app-container" style={{ paddingTop }}>
         ...
          <div className="container-fluid view-container" id="app-view-container">
            <Card className="jh-card">
              <Routes/>
            </Card>
            <Footer />
          </div>
        </div>
      </Router>
    );
  }
}

这是我的routes.tsx

import * as React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from 'app/modules/home/home';
import Boston from 'app/modules/boston/Boston';
// import HomestayMap from 'app/modules/homestaymap/HomestayMap';

const Routes = () => (
  <div className="view-routes">
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/boston" component={Boston} />
    </Switch>
  </div>
);

export default Routes;

Boston.tsx

import './Boston.scss';
import * as React from 'react';
import { connect } from 'react-redux';
import { Row, Col, Alert, H2, Hr, Container } from 'reactstrap';

export default class Boston extends React.Component {
  render() {
    return (
      <div>
        <Row>
          <Col md="6">
            <H2> lorem
            </H2>
            <p>lorem
            </p>
          </Col>
          <Col md="6"/>
        </Row>
        <Hr/>
        <Row>
          <Col md="6">
            <img src="#"/>
          </Col>
          <Col md="6">
            <H2>lorem</H2>
            <p>bla bla<br/></p>
          </Col>
        </Row>
        <Hr/>
        <Row>
          <Col md="6">
            <H2> bla bla </H2><br/>
            <p>bla bla
              <br/>
            </p>
          </Col>
          <Col md="6"><img/></Col>
        </Row>
      </div>
    );
  }
}

/boston的网址没有响应。

React路由器没有响应 - 没有错误

0 个答案: