Я создаю веб-приложение, используя шаблон реакции на машинопись, и пытаюсь получить 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>
);
}
}
Вот мой route.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>
);
}
}
URL-адрес /boston
не отвечает.