时间戳

首页 > 解决方案 > 在 App.js 和 routes.js 中使用 Route 的区别

javascript - 在 App.js 和 routes.js 中使用 Route 的区别

问题描述

我目前正在做一个前端使用 React.js 的个人网络应用项目。

我意识到有些人Route path在指定路径时尝试在 App.js 上进行设置。例子：

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 path在 routes.js 中使用

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

import App from './App'

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

我很困惑有什么区别以及我们应该使用哪一个。

标签： javascriptreactjs

解决方案

没有区别，您应该按照自己喜欢的方式使用和构建它。您需要了解Route实际工作方式，因此引用主要文档：

它最基本的职责是在位置与路由的路径匹配时呈现一些 UI。

因此，您可以将其Route视为某种包装器，当您的浏览器中的路径与您的 Route 道具匹配时，它会呈现您想要的组件（通过componentor道具） 。renderpath

这意味着您可以拥有多个Route相同的 's path- 但如果您将开始拥有很多 - 这是考虑更好的项目结构的好兆头。

推荐阅读