我的第一个全栈 Web 应用程序( 七 )_在这篇文章

凡事都有解决的办法，对于这个问题，我们可以使用react-router库。它有许多功能，其中包括：

URL显示用户的当前位置，而不仅仅是显示根页面的URL

用户可以使用浏览器的前进和后退按钮

用户可以在地址栏中输入URL ，跳转到指定页面

下面以 CitiesContainer 为例来介绍路由的工作方式：

App.jsimportReact from 'react' ; import {Route from 'react-router-dom' ; import CitiesContainer from './containers/CitiesContainer' ; class CitiesContainer extends React . Component { render(){ return ( Routepath= '/cities' component={CitiesContainer/ ) export default App;

这里使用了 path 而不是 exact path ，因此所有包含 /cities 的路径都会被处理。 CitiesContainer 容器的内部如下：

containers/CitiesContainer.js import React from 'react' ; import {connect from 'react-redux' ; import {Route from 'react-router-dom' ; import {fetchCities from '../actions/fetchCities' ; import CitiesList from '../components/CitiesList' ; import CityPage from '../components/CityPage' ; import BicyclesList from '../components/BicyclesList' ; class CitiesContainer extends React . Component { componentDidMount(){ this .props.fetchCities() render(){ return ( div Routeexactpath= '/cities' render={()=CitiesList cities={ this .props.cities // Routeexactpath= '/cities/:id' render={(routerProps)= CityPage{...routerPropscities={ this .props.cities // Routepath= '/cities/:id/bicycles' render={(routerProps)= BicyclesList{...routerPropscities={ this .props.cities // /div ) constmapStateToProps=state={ return { cities:state.cities export default connect(mapStateToProps{fetchCities)(CitiesContainer)