腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >反应-路由器一些不匹配的路由

问反应-路由器一些不匹配的路由
EN

Stack Overflow用户

提问于 2022-01-04 16:58:20

回答 2查看 1K关注 0票数 1

我有私人航线

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 PrivateRoute

getUser()函数返回对象字符串{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部分重定向到/时

reactjs

react-router

react-router-dom

回答 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/>。

票数 1

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的代码片段，只编辑了上面提到的部分，添加了缺少的页面组件和登录/注销页面，以清除本地存储和临时布局。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70586715

复制

什么是路由器，路由器用来做什么、路由器的工作过程等

存储

雷大亨

2018/01/01

3.1K0