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

对于页面多、角色多的单页应用，路由是非常重要的一种基础设施。
所以，如果你的应用符合上面的描述，那么它的路由不应该写在入口里，更不应该写在组件里，而应该放到独立的路由文件夹，并且尽可能抽离配置项，让配置归于配置，处理归于处理。
不过，如果不是界面多（且/或）角色多的单页应用，就没有必要写路由，if else一把梭就行。