I am migrating js to ts and have an error with my modified code:
Line 26:8: Parsing error: '>' expected
import React from "react";
import { Route, Redirect, RouteProps } from "react-router-dom";
import {render} from "react-dom"
import {AppProps} from "../App"
function querystring(name: string, url = window.location.href) {
name = name.replace(/[[]]/g, "\\$&");
const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i");
const results = regex.exec(url);
if (!results) {
return null;
}
if (!results[2]) {
return "";
}
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
RouteProps & {appProps: AppProps}) {
const redirect = querystring("redirect");
return (
<Route
{...rest} // the issue is here
render={ props => !appProps.isAuthenticated ?
<C {...props} {...appProps} />
:
<Redirect to={redirect === "" || redirect === null ? "/" : redirect}/>
}
/>
);
}
If someone sees the problem, that would be kind :). Thanks!
1/ File needs to have tsx extension
2/ syntax was also wrong in the tsx syntax. I changed to this and now it's ok:
export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
RouteProps & {appProps: AppProps}) {
const redirect = querystring("redirect");
return (
<Route {...rest}
render={ props => !appProps.isAuthenticated ?
<C {...props} {...appProps} />
:
<Redirect to={redirect === "" || redirect === null ? "/" : redirect}/>
}
/>
);
}
Now I have another issue with binding element 'C', but it's another story.
Thanks everyone!
Change the file extension from .ts
to .tsx
.