react路由

在 React 中，路由用于定义不同的页面路径和对应的组件展示。常用的 React 路由库是  react-router-dom 。

 

主要的概念和组件包括：

 

1.  BrowserRouter  或  HashRouter  ：提供路由的上下文环境。

 

-  BrowserRouter  使用 HTML5 的 History API 来保持 URL 的整洁，没有  #  符号。

-  HashRouter  在 URL 中使用  #  来处理路由，兼容性更好。

2.  Route  ：定义路由路径和对应的组件。

3.  Link  ：用于创建导航链接，点击时切换路由而无需页面刷新。

4.  Switch  ：确保只匹配并渲染第一个匹配的路由。

 

例如：

 

jsx格式：

import { BrowserRouter as Router, Route, Link, Switch } from'react-router-dom';

 

function Home() {

  return <h2>Home Page</h2>;

}

 

function About() {

  return <h2>About Page</h2>;

}

 

function App() {

  return (

    <Router>

      <div>

        <nav>

          <ul>

            <li>

              <Link to="/">Home</Link>

            </li>

            <li>

              <Link to="/about">About</Link>

            </li>

          </ul>

        </nav>

 

        <Switch>

          <Route exact path="/" component={Home} />

          <Route path="/about" component={About} />

        </Switch>

      </div>

    </Router>

  );

}

 

通过这样的设置，用户点击不同的  Link  时，对应的组件会根据路由路径进行展示。