我使用create-react-app作为我的应用程序的基础,我目前在App.js文件中为我的SPA定义模板,并在不同的.js文件中定义每个组件:Page1.js,Page2.js,我正在使用react-router-dom(V ^ 4.2.2)来路由我的应用程序.
我的App.js文件:
//node_modules (using ES6 modules) import React, { Component } from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; //others import { Home } from './pages/Home.js'; import { Page1 } from './pages/Page1.js'; import { Page2 } from './pages/Page2.js'; //App variables const { Content, Footer, Sider } = Layout; class App extends Component { render() { return ( <Router> <Layout> <Sider> //some code </Sider> <Layout> <Header> //some code </Header> <Content> <Route exact path="/" component={Home}/> <Route path="/page1" component={Page1}/> <Route path="/page2" component={Page2}/> </Content> <Footer> //some code </Footer> </Layout> </Layout> </Router> ); } } export default App;在跳转到您的密码之前,请注意,
react-react-dom中的Route(又名路由器v4及更高版本)只是一个Component,它可以是StatelessComponent或ComponentClass来呈现视图.你可以在这里参考,
https://reacttraining.com/react-router/web/guides/philosophy
在你的问题中,
I would like to know how can I have the Login page in a separate page
如果你想要在没有布局的情况下渲染“登录”视图,那么你可能想要这样做,
在App.js中
import Main from './Main'; // Your original <App /> page import Login from './Login'; // Your new <Login /> page // In your App component <Router> <Switch> <Route exact path="/" component={Main} /> <Route path="/login" component={Login} /> </Switch> </Router> // Export your App component
我想在这里提几点,
>我添加< Switch>包含一个或多个< Route />因为它将确保您的应用程序仅从Route渲染一个视图(记住< Route />只是基于您的匹配路径使用url呈现视图的组件).因此,您可能希望包装< PageABC />与< Switch />否则它将在后台渲染所有视图.
参考:https://reacttraining.com/react-router/web/api/Switch
>尝试创建一个新组件< Main />并包装您的原始< App />新创建的< Main />中的组件布局.创建您的<登录/>组件以及您的登录页面布局
>它将完成将您的主要内容与登录页面分开的工作,但这不会对用户进行身份验证.您可以通过访问/登录URL并通过URL访问主页面来自由地进入登录页面.如果要创建授权
和未经授权的路线,您可以在All About React Router 4查看本教程
>您可以选择添加< Redirect to =“/ somePublicUrl”/>如果url与任何路径路径不匹配,请确保您的应用始终呈现某些视图
我希望它有所帮助.如果有什么东西不能包裹你,请告诉我.