React项目路由实战

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';
 
const Routes = () => (
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route component={NotFoundPage} />
  </Switch>
);
 
export default Routes;

这个代码实例展示了如何在一个React项目中使用react-router-dom定义路由。它使用<Switch>来确保只有一个路由会被匹配并渲染，<Route exact path="/" component={HomePage} />确保了当URL为/时，只渲染HomePage组件。当没有其他路由匹配时，<Route component={NotFoundPage} />会渲染NotFoundPage组件。这个实例简洁明了，并且清晰地展示了如何在实际项目中使用React Router。