Question

我目前正在前端与React.js进行个人网络应用项目。

我意识到有些人在指定路径时会尝试在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;

但是，我也意识到在routes.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视为某种包装器，当您的浏览器中的路径与您的路径匹配时，该包装器会呈现您所需的组件（通过component或render道具） {1}}道具。

这意味着您可以使用相同的path多个Route - 但如果您将开始拥有大量的path，那么考虑更好的项目结构是一个好兆头。

Answer 2

如上所述，没有功能差异。我强烈建议将它分成不同的文件作为一般规则，这允许您添加路由而不会使根文件变得太麻烦，它也遵循函数分离规则，这是编程中的一个好习惯。

在App.js和routes.js中使用Route之间的区别

2 个答案: