首页 文章

具有单独页面的React路由器

提问于
浏览 次
0

我有一个单独的登录和主页，在用户登录后，它们将被转移到main . 我用这个：

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 组件中的"page"：

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

在URL中使用类似 localhost:3000/users 的内容，它会转到空白页面 . 访问 /users 的唯一方法是从 Main 组件开始，然后单击转到 /users 的链接或按钮 .

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

如果我将 exact path='/' 更改为 path='/' 它可以工作，但是我失去了任何未找到的页面 .

reactjs react-router

2 回答

  • 1

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

    <Route> 定义了应该呈现的组件，而 <Link to> 定义了点击后我们将去的URL . 如果将Route放在主组件内，则需要先加载主组件以定义路径

    回复于
  • 0

    请查看下面的代码以获得所需的结果：

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

    在上面的例子中，我将登录页面显示为默认路由，如果用户登录，则显示仪表板（包含更多路径） . 有关详细信息，请查看答案here

    回复于

相关问题