javascript - react 的路由是否可以写在模块里？

Question

我用 react 写了一个页面，在这个页面里有几个模块，其中一些模块都有 a 标签，比如

footer.jsx

import React from 'react';const Footer = () => {    return (        <footer className="footer">                 <a href="/blog" target="_blank">blog</a>                 <a href="/help" target="_blank">help</a>        </footer>    )}export default Footer;

我想实现的是，当点击这里的 blog 或者 help 后会访问对应的页面，blog 访问 /blog，help 访问 /help。

然后在各自的页面里，可以重定向到其它的页面去，比如

blog -> /blog -> https://blog.domain.com

help -> /help -> https://help.domain.com

我的问题是

• 是否可以将这些功能都在这一个 react 模块 footer.js 里实现？

• 是必须要在项目文件 app.jsx 里写路由吗？在 app.jsx 里写路由，然后做重定向，比如

   import React from 'react'; import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import Footer from './Footer';  const App = () => {    return (      <Router>        <Switch>          <Redirect from="/blog" to="https://blog.domain.com" />          <Redirect from="/help" to="https://help.domain.com" />        </Switch>        <Footer />      </Router>    );  };  export default App;

我这么考虑的原因是，如果每一个模块里的链接，都能在模块本身写路由之类的，会方便很多，如果都要到 app 这里来写路由，会感觉很奇怪。

路由

Answer 1

对于你的问题，答案是肯定的。你可以在 React 模块中实现路由功能，而不需要在项目文件 app.jsx 中写所有的路由。

你可以在每个模块中使用 react-router-dom 中的 Link 组件，而不是直接使用 a 标签。这样，你就可以在每个模块中控制路由跳转，而不需要在 app.jsx 中写所有的路由。

以下是一个示例，演示如何在 Footer 模块中使用 Link 组件：

import React from 'react';import { Link } from 'react-router-dom';const Footer = () => {  return (    <footer className="footer">      <Link to="/blog" target="_blank">blog</Link>      <Link to="/help" target="_blank">help</Link>    </footer>  );};export default Footer;

在这个示例中，当用户点击 "blog" 或 "help" 时，将会触发相应的路由跳转。你可以在每个模块中实现自己的路由逻辑，而不需要在 app.jsx 中写所有的路由。

至于重定向，你可以在每个路由组件中实现。例如，你可以在 Blog 模块中重定向到 https://blog.domain.com：

import React from 'react';import { Redirect } from 'react-router-dom';const Blog = () => {  // 在这里实现重定向逻辑  if (/* 满足重定向条件 */) {    return <Redirect to="https://blog.domain.com" />;  }  // 其他组件内容...};export default Blog;

通过这种方式，你可以在每个模块中实现自己的路由和重定向逻辑，而不需要在 app.jsx 中写所有的路由。