在App.js和route.js中使用Route之間的區別

Question

我目前正在使用前端的React.js做一個個人的Web應用程序項目。

我意識到有人在指定路徑時嘗試在App.js上設置Route path路徑。 例：

class App extends Component {
    render() {
        return (
            <HashRouter>
                <div>
                  <Route path="/" exact component={LoginPage} />
                  <Route path="/insta" exact component={APITest} />
                </div>
            </HashRouter>
        );
    }
}

export default App;

但是，我也意識到Route.js中使用了Route path

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './App'

export default (
    <Route path="/" component = { App }></Route>
)

我很困惑這些差異是什么，我們應該使用哪種差異。

Answer 1

沒有區別，您應該按照自己喜歡的方式使用它並對其進行結構化。 您需要了解Route實際工作方式，因此請引用主要文檔：

它的最基本職責是在位置與路線的路徑匹配時呈現一些UI。

因此，您可以將Route視為某種包裝，當瀏覽器中的path與Route path prop匹配時，該包裝即可渲染所需的組件（通過component或render prop）。

這意味着您可以有多個具有相同path Route ，但是如果您開始擁有很多Route ，那么考慮更好的項目結構是一個好兆頭。

Answer 2

如前所述，沒有功能上的區別。 我強烈建議作為一般規則將其分為不同的文件，這使您可以添加路由而不會使根文件變得過於繁瑣，它也遵循功能分離的規則，這在編程中是一種很好的做法。