故事书反应路由器 - Javascript

故事书反应路由器是一个基于React和React Router的JavaScript库，它可以快速构建单页应用程序。

特征

故事书反应路由器提供以下功能：

• 提供基本路由配置
• 支持嵌套路由
• 支持路由参数
• 支持路由重定向
• 支持路由嵌套历史记录
• 支持动态路由

如何使用

首先，您需要在项目中安装故事书反应路由器：

npm install react-router-dom

然后，在您的应用程序中，您需要导入路由器和相关组件：

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

为了使用路由器，您需要将应用程序包装在 <Router> 组件中：

function App() {
  return (
    <Router>
      <div>
        ...
      </div>
    </Router>
  );
}

之后，您可以在应用程序中使用 <Route> 组件来指定路径和组件：

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

这里，<Route> 组件的 path 属性指定了路径，component 属性指定了应该渲染的组件。

嵌套路由

您可以使用嵌套 <Router> 组件来创建嵌套路由：

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>

      <Router>
        <nav>
          <ul>
            <li>
              <Link to="/about/history">History</Link>
            </li>
            <li>
              <Link to="/about/team">Team</Link>
            </li>
          </ul>
        </nav>

        <Route path="/about/history" component={History} />
        <Route path="/about/team" component={Team} />
      </Router>
    </div>
  );
}

路由参数

您可以使用路由参数来捕获 URL 中的值：

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/users/123">User 123</Link>
            </li>
            <li>
              <Link to="/users/456">User 456</Link>
            </li>
          </ul>
        </nav>

        <Route path="/users/:id" component={User} />
      </div>
    </Router>
  );
}

function User({ match }) {
  return (
    <div>
      <h2>User {match.params.id}</h2>
    </div>
  );
}

在这个例子中，路由参数保存在 match.params.id 中。

路由重定向

您可以使用 <Redirect> 组件将用户重定向到新的路径：

import { Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Redirect from="/" to="/about" />

        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

在这个例子中，用户将在访问应用程序的根路径时被重定向到 /about。

路由嵌套历史记录

您可以使用 withRouter() 函数获得路由历史记录和定位对象：

import { withRouter } from 'react-router-dom';

function Example(props) {
  const { history, location } = props;

  function handleClick() {
    history.push('/new/path');
  }

  return (
    <div>
      <p>当前路径: {location.pathname}</p>
      <button onClick={handleClick}>跳转到新路径</button>
    </div>
  );
}

export default withRouter(Example);

动态路由

您可以使用 <Switch> 组件将路由挂起到动态位置：

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}

function NotFound() {
  return (
    <div>
      <h2>404 - Not Found</h2>
    </div>
  );
}

在这个例子中，<Switch> 组件使路由挂起到 NotFound 组件中，如果没有路径与 URL 匹配，则将渲染此组件。

总结

故事书反应路由器是一个功能强大的JavaScript库，它可以帮助您轻松构建单页应用程序。它支持基本路由、嵌套路由、路由参数、路由重定向、路由嵌套历史记录和动态路由。如果您正在构建具有复杂路由需求的应用程序，故事书反应路由器是一个值得考虑的库。