具有单独页面的反应路由器答案

【问题标题】：React Router with Separate Pages具有单独页面的反应路由器
【发布时间】：2018-12-10 01:46:45
【问题描述】：

我有一个单独的登录和主页，在用户登录后，他们会转移到主页面。我正在使用这个：

import Main from './Main';    // Original <App /> page
import Login from './Login';  // New <Login /> page  

// In App component  

<Router>  
  <Switch>
    <Route exact path="/" component={Main} />  
    <Route path="/login" component={Login} />
    <Route component{NotFound} />
  </Switch>
</Router>

到目前为止，如果我想访问 Main 组件中的“页面”：

<Route exact path="/users" component={Users} />

在 URL 中使用 localhost:3000/users 之类的东西，它会转到一个空白页面。访问/users 的唯一方法是从Main 组件开始，然后单击指向/users 的链接或按钮。

有人知道解决这个问题的正确方法吗？我希望能够访问 URL 中的组件，但也有一个单独的登录页面。

如果我将 exact path='/' 更改为 path='/' 它可以工作，但我会丢失任何类型的未找到页面的全部信息。

【问题讨论】：

您在服务器端使用什么？似乎服务器端路由阻塞了客户端路由。
我正在为 api 使用 express - 即 /api/add-user ..etc。但它是：app.use(proxy('/api/*', { target: 'http://localhost:5000/' })); 用于表示 @MohanBan 的代理配置

标签： reactjs react-router

【解决方案1】：

您应该将<Route exact path="/users" component={Users} /> 放在应用程序组件中而不是主组件中

<Route> 定义了应该渲染的组件，而<Link to> 定义了我们点击后将去的 url。如果你把 Route 放在 Main Component 里面，那么它需要先加载 Main Component 来定义路由

【讨论】：

如果我将它包含在 App.js 部分中，它将呈现为一个单独的页面本身，而不是在 /main 组件中。例如，我在主目录中有一个页眉和页脚，当我访问 /users 时不会显示。

【解决方案2】：

看看下面的代码来实现你想要的结果：

               <Switch>                  
                {this.props.notLoggedIn === true
                  ? <Route path='/' component={LandingPage}/>                                          
                  : <Dashboard />                    
                }
                <Route component={PageNotFound}/>
              </Switch>

在上述情况下，我将登录页面显示为默认路由，如果用户登录，则会显示仪表板（包含更多路由）。详情看答案here

【讨论】：