Question 184453 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – When i use react-router Navigate Unexpected token, expected ","

enter image description here
When I learned permission routing in react-router, navigate dealt with the jump issue
Navigate component throw an error Unexpected token, expected "," Why display symbol problems?

Detailed errors are shown on the picture above,Could someone help me with this

This is the source code of the error file

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
const IsAuth = () => {
  if (true) {
    return <Navigate to="/login" />;
  }
};
export default IsAuth;

i use IsAuth.jsx in index.tsx

import IsAuth from './Login/IsAuth';
const createRoutes = (
(xxxxxx)=>{
...
    return (
        <IsAuth>
         <Routes>
         <Routes/>
        <IsAuth/>
    );
}
)
export default createRoutes;
Tags:

2

Answers


  1. 0

    If you are using react-router-dom then use link instead of navigate.

    import React from 'react';
import { Navigate, useLocation, Link } from 'react-router-dom';
const IsAuth = () => {
  if (true) {
    return <Link to="/login" />;
  }
};
export default IsAuth;

    In other cases you can use this way.
    First you take a variable and import useNavigate than you use this variable name. Example: const navigate = useNavigate(). You can try it.

    Login or Signup to reply.
  2. 0

    Issues

    • The IsAuth component is a file with a *.js file extension so it appears your project has been configured to only expect JSX in *.jsx|*.tsx files. rename the file to IsAuth.jsx.
    • IsAuth isn’t returning the children prop to render the wrapped components.

    Solution

    • Rename to IsAuth.jsx
    • Return children for the authenticated pathway.

    IsAuth.jsx

    const IsAuth = ({ children }) => {
  return /* authenticated condition */
    ? children
    :  <Navigate to="/login" replace />;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search