我有专用路线
应用程序路由.js文件
const routes = [
{ path: '/', component: HomePage },
{ path: '/articles/:id', component: Article },
{ path: '/expert', component: Experts },
...
{ path: '/requests', component: ComRequest },
{ path: '/admin', component: AdminHomePage },]
export default routes.map(route => {
return {
...route,
component: route.component
}
})
content.js文件将应用程序路由迭代为数组如果不匹配任何路由，则重定向到/
import routes from 'app-routes'
return(
<Switch>
{routes.map(({ path, component }) => (
<PrivateRoute
exact
key={path}
path={path}
component={component}
/>
))}
<Redirect to={'/'} />
</Switch>)
PrivateRoute.js组件文件检查用户是否未重定向到/login
function PrivateRoute({ component, ...rest }) {
return (
<Switch>
<Route
{...rest}
render={(matchProps) => getUser()
?
<WithLayout
{...matchProps}
component={component}
layout={MainLayout}
/>
:
<Redirect to={{ pathname: '/login', state: { from: matchProps.location } }} />}
/>
</Switch>
)
}
export default PrivateRoute
getUser((函数返回Object字符串｛userdata｝
getUser.js
export function getUser() {
return localStorage.getItem('user')
}
在浏览器中，一些/articles、/expert路由呈现视图，但随机或逻辑无法确定路由其他一些/请求，/admin不匹配的路由，并重定向到/
有时每条路线都会重定向到/
如果我评论<Redirect to={'/'}/>，则某些路线会呈现白屏幕
还有一件令人讨厌的事情是在刷新时总是重定向工作到/url，而不是停留在匹配的路由上
在app.js中，如果找到则检查用户返回Content如果没有则用户返回NotAuthenticatedContent路由
const { user } = useAuth()
if (user && user.id) {
return <Content />
} else
return <NotAuthenticatedContent />
};
从AuthContext 导入user
function AuthProvider(props) {
const [user, setUser] = useState()
const { user: currentUser } = useSelector((state) => state.account)
useEffect(() => {
(async function () {
if (currentUser && currentUser.jwt)
setUser(currentUser.user)
})();
}, []);
return (<AuthContext.Provider value={{user}} {...props}/>)
}
const AuthContext = createContext({})
const useAuth = () => useContext(AuthContext)
export {AuthProvider,useAuth}
我注意到history.push('/requests')可以转到/请求页面但当我在url部分键入重定向到/时
使用基于web的技术时，您需要习惯使用浏览器开发工具。在那里你会看到很多关于空页面的错误。
这些错误主要是由于react、reactrouter、react-routerdom中的主要版本更改，以及如何使用npm安装它们。
为了解决你的问题，首先，确保你有这些工具的第五个版本。尝试在没有版本的情况下安装将导致安装最新版本。当你对你的应用程序的功能有信心，但准备好进行大量更改时，请切换到v6。
npx create-react-app@5 appName
npm install react-router@5
npm install react-router-dom@5
如果版本不匹配，您将在控制台上收到不兼容导入的错误，但许多错误仅在浏览器上运行时出现，因此请打开开发人员工具查看其他错误。
我试过你的代码片段。除了这些版本不兼容和一些逻辑错误之外，它们没有任何问题。
您不需要从路由映射导出新对象，除非您真的更改了结构，所以
export default routes就足够了。您没有直接进入登录页面的途径。在
content.js的交换机组件中，在您的专用路由映射之外，添加<Route exact key="/login" path="/login" render={Login}/>除此之外，请确保您的路线不会遮挡某些部分匹配
我已经在github上上传了我的示例应用程序：react-v5-sample-login-route-yout。为此，我使用了上面的命令，删除了源文件夹中除index.*和App.js之外的所有内容，按原样复制了OP的代码片段，只编辑了我上面提到的部分，添加了缺失的页面组件和登录/注销页面以清除本地存储，并即兴布局。
我把console.log((放在每一个地方，并找到了它是app.js
const { user } = useAuth()
if (user && user.id) {
console.log('user logged in')
return <Content />
} else
console.log('user not logged in')
return <NotAuthenticatedContent/>
}
在浏览器中，user的第一个值或首字母为空，在控制台中打印了未登录的用户，后来还打印了登录的用户，因此user检查错误，然后返回<NotAuthenticatedContent/>，它具有一些相同的路由，如/articles/:id,/expert