我正在尝试学习反应路由,这就是制作小型应用程序的原因。
我有 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) 时,它会自动重定向到错误页面
如何在面板中创建路由