我是 React 和 React Router 的新手。我一直在尝试创建一个单页应用程序,该应用程序的布局带有导航栏和内容,以及一个未在此布局内加载的登录页面。我一直在搜索网络和 stackoverflow,但一直无法弄清楚。为了创建我的应用程序,我使用了“yarn create react-app appName”并使用“yarn add”来添加反应路由器。我需要如何创建我的路线,以便我有一个带有自己的布局的登录页面和一个可以显示我的内容的主布局。
这是我的 index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Run Code Online (Sandbox Code Playgroud)
这是我的 App.js:
import React, { Component } from 'react';
import Main from "./Main";
import Login, {fakeAuth} from "./components/Login";
import {
Route,
NavLink,
HashRouter,
Redirect,
withRouter,
Switch,
BrowserRouter
} from "react-router-dom";
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route …Run Code Online (Sandbox Code Playgroud) javascript login single-page-application reactjs react-router