反应-路由器一些不匹配的路由
我有私人航线
app- file .app文件
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
}
})如果不匹配重定向到/的任何路由，则将应用程序路由作为数组进行迭代。
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 PrivateRoutegetUser()函数返回对象字符串{userdata}
getUser.js
export function getUser() {
return localStorage.getItem('user')
}在浏览器中某些/articles、/expert路由呈现视图，但随机或逻辑无法确定其他路由如何与/requests、/admin路由不匹配，并重定向到/E 219
有时，每条路线都重定向到/
如果我评论<Redirect to={'/'}/>，有些路由会呈现白色屏幕
和另一件恼人的事情是，刷新时的总是重定向工作到/ url，而不是停留在匹配的路由上。
在app.js中，检查用户是否找到返回Content，如果没有，用户返回NotAuthenticatedContent路由
const { user } = useAuth()
if (user && user.id) {
return <Content />
} else
return <NotAuthenticatedContent />
};user从AuthContext进口
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')可以转到/requests页面，但是当我输入url部分重定向到/时
回答 2
Stack Overflow用户
发布于 2022-01-17 16:55:23
我把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的第一个值或初始值为null，而在控制台中，用户未登录，后来又打印了登录的用户，因此user检查是错误的，然后返回具有与/articles/:id,/expert相同路由的<NotAuthenticatedContent/>。
Stack Overflow用户
发布于 2022-01-14 16:12:53
使用基于web的技术，您需要习惯使用浏览器开发工具。在那里，您将看到许多关于您的空页面的错误。
这些错误主要是由于react、react路由器、中的主要版本更改，以及您如何尝试使用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-简单-登录-路由-布局上。为此，我使用了上述命令，删除了源文件夹中的所有内容( index.*和App.js除外)，复制了OP的代码片段，只编辑了上面提到的部分，添加了缺少的页面组件和登录/注销页面，以清除本地存储和临时布局。
https://stackoverflow.com/questions/70586715
复制相似问题
路由不匹配反应路由器(-redux)
嵌套反应路由器:不匹配任何路由
反应-路由器在有效路由上不匹配
一些不匹配的路由-路由器4
反应路由器-没有匹配的任何路由
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
