在登陆页面上反应路由

时间:2021-07-28 07:16:25

标签: reactjs react-router react-router-dom

我正在尝试学习反应路由,这就是制作小型应用程序的原因。

我有 5 页

  1. 登录
  2. 注册
  3. 面板(登陆页面)
  4. 用户
  5. 错误

在 app.js 中

function App() {
  const [user, setUser] = useState(null);
  let history = useHistory();
  return (
    <Router>
      <UserContext.Provider value={{ user, setUser }}>
        <Switch>
          <Route exact path={paths.login}>
            <LoginWrapper history={history} />
          </Route>
          <Route exact path={paths.signup}>
            <SignupWrapper history={history} />
          </Route>
          <PrivateRouting path={paths.dashboard}
            isAuthenticated={user}
            history={history}
            component={Panel} />
          <Route component={ErrorPage} />
        </Switch>
      </UserContext.Provider>
    </Router>
  );
}

成功登录后其重定向面板(登陆页面)

面板.js

import React, { useContext }  from 'react';
import PropTypes from 'prop-types';
import {
  BrowserRouter as Router, Route, Switch,
} from 'react-router-dom';
import Header from '../../Components/Header/Header';
import { UserContext } from '../../Utils/UserContext';
import {paths} from '../../Constants/Paths';
import User from '../User/User';

const Panel =(props)=>{
  const {history}=props;
  const { user } = useContext(UserContext);
  console.log(props);
  return (
    <div>
      <Header />
      Home Page
      <Router>
        <Switch>
          <Route exact path={paths.user}>
            <User user={user} history={history} />
          </Route>
        </Switch>
      </Router>
    </div>
  );
};
export default Panel;

Panel.propTypes = {
  isAuthenticated: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool]),
  history:PropTypes.object.isRequired,
};


import React from 'react';
import {
  Route,
  Redirect
} from 'react-router-dom';
import PropTypes from 'prop-types';

const PrivateRouting = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated
      ? <Component {...props} />
      : <Redirect to="/" />
  )} />
);
export default PrivateRouting;

PrivateRouting.propTypes = {
  isAuthenticated: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool]),
  component: PropTypes.elementType.isRequired,
};

PrivateRouting.defaultProps = {
  name: false
};

当我尝试重定向 /user(paths.user) 时,它会自动重定向到错误页面

如何在面板中创建路由

0 个答案:

没有答案