我有一个反应路由器设置用于登录和身份验证,还有一个404捕获所有页面 - 我所拥有的问题是NotFound组件上的链接始终链接回自身,似乎无法在下班后的任何地方找到修复谷歌搜索
这是我的路线设置
import React from 'react';
import HomePage from './components/HomePage.js';
import NotFound from './components/NotFound.js';
import DashboardPage from './containers/DashboardPage.js';
import LoginPage from './containers/LoginPage.js';
import SignUpPage from './containers/SignUpPage.js';
import Auth from './modules/Auth.js';
import { Redirect } from 'react-router';
import {
Route,
Switch
} from 'react-router-dom';
const routes = [
{
path: '/',
component: HomePage,
name: 'home'
},
{
path: '/signup',
component: SignUpPage,
name: 'signup'
},
{
path: '/login',
component: LoginPage,
name:'login'
},
{
path: '/logout',
component: HomePage,
name: 'logout'
},
{
path: '/me',
component: DashboardPage,
name: 'dashboard'
},
{
path: '*',
component: NotFound,
name: 'notfound'
}
];
const isLoggedIn = () => {
return Auth.isUserAuthenticated()
}
const RouteFunc = () => {
let ele = false;
const paths = routes.map((route) => {
return route.path;
})
const path = window.location.pathname;
paths.forEach((val)=> {
if (val === path) {
ele = true
}
});
return ele;
}
const loopRoutes = routes.map((route, key) => {
const Page = route.component;
const HomePage = routes[0].component;
const DashboardPage = routes[4].component;
console.log(route, key)
if (route.name === 'logout') {
return (
<Route exact path="/logout" key={key} render={() => {
Auth.deauthenticateUser();
return (
<Redirect to="/"/>
)
}}/>
)
}
if (route.name === 'dashboard') {
return (
<Route exact path={'/me'} key={key} render={() => (
isLoggedIn() ? (
<DashboardPage />
) : (
<HomePage />
)
)}/>
)
}
if (route.name === 'home') {
return (
<Route exact path={route.path} key={key} render={() => (
isLoggedIn() ? (
<DashboardPage />
) : (
<HomePage />
)
)}/>
)
}
if (RouteFunc()) {
return (
<Route exact path={route.path} key={key} render={() => (
isLoggedIn() ? (
<Redirect to="/me"/>
) : (
<Page />
)
)}/>
)
}
return (
<Route exact key={key} render={() => (
isLoggedIn() ? (
<Redirect to="/me"/>
) : (
<NotFound />
)
)} />
)
});
const AppRouting = () => {
return (
<div>
<Switch>
{loopRoutes}
</Switch>
</div>
)
}
export default AppRouting;
这是我的Notfound组件 - 当我尝试将它链接到登录组件时它只链接到自己,我不明白它为什么这样做
import React from 'react';
import { Link } from 'react-router-dom';
const NotFound = (props) => (
<div className="container">
{console.log(props)}
<h1>404 page not found</h1>
<p>We are sorry but the page you are looking for does not exist.</p>
<p><Link to="/login">login</Link></p>
</div>
)
export default NotFound;
我认为这是我的路线配置,但无法弄清楚我需要更改它的位置,当我做手动刷新一切正常但只有当使用反应路由器的地方不起作用时才会访问404页面所以从主页工作就好了
一如既往,任何帮助和意见都表示赞赏