如何使用 React Router 路由到文件夹中的文件？答案

【问题标题】：How to route to a file in a folder with React Router?如何使用 React Router 路由到文件夹中的文件？
【发布时间】：2020-10-14 13:55:15
【问题描述】：

我的 React 应用程序的文件夹结构如下：

- src

-- pages
--- Home.js
--- Contact.js

--- project1
---- About.js

使用 React Router，我可以像这样轻松导航到 Home.js 和 Contact.js：

<Router>
  <Switch>
    <Route path='/'>
      <Home />
    </Route>
    <Route path='/contact-me'>
      <Contact />
    </Route>
  </Switch>
</Router>

然后点击进入页面：

<Link to='/'>Home</Link>
<Link to='/contact-me'>Contact me</Link>

现在我想导航到 project1 文件夹中的 About.js，我该如何使用 React Router 来做到这一点？

【问题讨论】：

标签： reactjs routes react-router

【解决方案1】：

您可以像导入其他页面一样导入关于页面

import About from '../pages/project1/About'

<Router>
 <Switch>
  <Route path='/'>
   <Home />
  </Route>
  <Route path='/contact-me'>
   <Contact />
  </Route>
  <Route path='/about-us'>
   <About />
  </Route>
 </Switch>
</Router>

【讨论】：

【解决方案2】：

你必须像 Home 和 contact 组件那样做首先导入组件，然后创建路由。

import About from "./project1/About.js"
<Router>
  <Switch>
    <Route path='/'>
      <Home />
    </Route>
    <Route path='/contact-me'>
      <Contact />
    </Route>
    <Route path='/about-me'>
      <About />
    </Route>
  </Switch>
</Router>

【讨论】：