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

Question

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;

How is your build configured? Do you expect JSX only inside `.jsx` files? (if so: note that your code is inside a vanilla `.js` file) — Adriano Repetti, Jun 12 '23 at 08:47
i import IsAuth in index.tsx import IsAuth from './Login/IsAuth'; wrap the Routes with IsAuth — Caroline tian, Jun 12 '23 at 09:04
From the logs, I see you've a js file as IsAuth.js with JSX in it. Try changing the filename to IsAuth.jsx — Shahzaib, Jun 12 '23 at 09:16
Does this answer your question? [Unexpected token at \`>\` of a \`<>\`](https://stackoverflow.com/questions/75368559/unexpected-token-at-of-a) — Adriano Repetti, Jun 12 '23 at 09:19

Pobarul islam · Answer 1 · 2023-06-12T08:53:43.703

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.

edited Jun 12 '23 at 08:53

answered Jun 12 '23 at 08:42

Pobarul islam

65
6

i try this, it didn't work , the same error :( – Caroline tian Jun 12 '23 at 08:51
i use return ; the same error :( – Caroline tian Jun 12 '23 at 08:53
the same error :( – Caroline tian Jun 12 '23 at 08:56
Add your codes here – Pobarul islam Jun 12 '23 at 08:58
Reedited in the question :） – Caroline tian Jun 12 '23 at 09:09

score 0 · Answer 2 · answered Jun 12 '23 at 16:36

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 />;
};

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

2 Answers2

Issues

Solution