Question

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

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='/'可以使用，但是对于未找到的页面，我会失去所有可能的东西。

Answer 1

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

<Route>定义了应呈现的组件，而<Link to>定义了单击后将要访问的URL。如果将Route放置在Main Component内，则需要先加载Main Component来定义路线

Answer 2

请看下面的代码以达到所需的结果：

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

在上述情况下，我将着陆页显示为默认路线，并且在显示用户登录到仪表板的情况下（包含更多路线）。有关详细信息，请查看答案here

有单独页面的React Router

2 个答案: