📜  如何安装 react-router-dom - Javascript (1)

📅  最后修改于: 2023-12-03 15:09:04.997000             🧑  作者: Mango

安装 react-router-dom

如果你正在使用 React 构建应用程序,那么使用 react-router-dom 库可以很方便地管理和控制路由的变化。

步骤
  1. 在终端窗口中进入你的 React 项目文件夹。

  2. 运行以下命令安装 react-router-dom:

    npm install react-router-dom
    

    或者如果你使用 yarn,运行以下命令:

    yarn add react-router-dom
    
  3. 在你的 React 应用程序中引入库:

    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    
  4. 在你的代码中使用 Router、Route 和 Switch 组件来管理和渲染路由。

    import React from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    import HomePage from './pages/HomePage';
    import AboutPage from './pages/AboutPage';
    import NotFoundPage from './pages/NotFoundPage';
    
    function App() {
      return (
        <Router>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/about" component={AboutPage} />
            <Route path="*" component={NotFoundPage} />
          </Switch>
        </Router>
      );
    }
    
    export default App;
    
  5. 运行你的应用程序,现在你就可以使用 react-router-dom 来控制你的路由了!

总结

安装和使用 react-router-dom 库很简单,只需要遵照上述步骤即可。如果你想进一步掌握 React 和 react-router-dom,建议参考官方文档。