Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I`m doing a project with react and I decided to make routes functionality a little different, I put the routes details to an separated file as an array: , and on the routes component I iterate through the array using the map function:
. But I don't know if what I did is something recommended, do you think it's better to put the routes in a static way directly in the component or is there a better solution?
It is better to use the useRoutes function provided by the react-router-dom package.
This makes your code shorter and authentication can be added easily using this procedure.
This way, you can define the main routes as an object like:
routes = (loggedIn) => [
{
path: '/',
children: [
// unprotected routes here
]
},
{
path: '/main',
element: loggedIn ? <Layout /> : <Navigate to='/login' />
children: [
// protected routes here
]
}
]
Then return useRoutes in the route component like:
const { loggedIn } = useSelector((state) => state.auth);
return useRoutes(routes(loggedIn), '');
useRoutes API: https://reactrouter.com/docs/en/v6/api#useroutes
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 20 days ago.
Improve this question
Problem: When importing custom functions into Cypress, I believe it cannot find the module subjects.
Subjects Array:
const subjects = [
"Accounting",
"Art",
"Biology",
"Business"
];
export default subjects;
Code Example:
import { subjects } from "../../../../src/data/subjects.js";
const subject = subjects[Math.floor(Math.random() * subjects.length)];
console.log(subject);
Error: Cannot read properties of undefined (reading 'length')
Note:
I've used Visual Studio Code's gui to obtain folder location.
My tsconfig.json in the cypress folder does not have a baseUrl key/value pair
My tsconfig.json in the root folder does have a baseUrl: "./src", but vs code shows an errors when subjects is referenced like from "src/data/subjects.js"
The exporting side of things uses the default export, so the import would be without the brackets.
import subjects from "../../../../src/data/subjects.js";
or change the export to be a named export
export const subjects = [
"Accounting",
"Art",
"Biology",
"Business"
];
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I want to get and save user interaction with angular app,
and app interactions with the APIs the add this log to a file.
If I understood your question correctly, you can write common logic on one place for user page navigation and API call.
For page navigation, subscribe to router events. Ex.
constructor(router:Router) {
router.events.subscribe(event => {
if(event instanceof NavigationStart) {
}
if(event instanceof NavigationEnd) {
// log record to file here --> 'user navigated to XYZ page.'
}
// NavigationCancel
// NavigationError
// RoutesRecognized
}
});
For API calls, you can implement HTTP interceptor.
#NgModule({
...
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptorService,
multi: true
}]
})
export class AppModule { }
#Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept( req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// log record to file --> 'calling api {url}'
return next.handle(req);
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to redirect to another page after a successful login. After I am getting the following error.
You are breaking the rules of hooks. The error is that you call useHistory within the function, they can only be called from functional component bodies and other react hooks. Login is a class-based component so it needs to either receive route props by being rendered directly by a Route, or be wrapped in the withRouter HOC.
Easy for sure solution is to use the withRouter HOC. This injects the route props.
If you want to truly redirect then I also suggest using history.replace so if the user later hits the back button or does a back navigation they don't hit your login component again.
import { withRouter } from 'react-router-dom';
class Login extends Component {
...
responseGoogle = (response) => {
...
this.props.history.replace("/admin/dashboard"); // <-- access history from props
};
...
}
export default withRouter(Login);
useHistory didn't work on class component.its for Functional component.You need to use withRouter or from the props.You can refer this doc for more https://reactrouter.com/web/api/withRouter. https://reactrouter.com/web/example/auth-workflow
import { Redirect } from 'react-router-dom';
responseGoogle = (response) => {
return <Redirect to='/admin/dashboard'/>
};
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to import a module I've created in the app to be loaded on a certain route which has it's own routing within
You need to have Routes.forChild(routes) in your custom modules' .module.ts file
then in your main routing load your module lazily
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: () => CustomModule
}
];
As of Angular 8 the new way to import child routes is this:
{path: "user", loadChildren: () => import("./users/user.module").then(m => m.UserModule)};
Angular team did this to be more consistent with next ES and also this will be understood by the IDEs, webpack, etc.
What Omair said is correct, however I'm answering as well for the sake of having options.
You can also do this, if you prefer:
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: 'src/app/path/to/your/module/custom.module#CustomModule'
}
];
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I get the difference between connected and unconnected components, but what is the utility in separating ALL components in this manner? All connected components rely on unconnected and vice-versa, so I'm not seeing why this pattern exists.
Connected component
import { connect } from 'react-redux';
import PrivacyPolicyUI from './PrivacyPolicyUI';
const mapStateToProps = (state) => {
return { };
};
const mapDispatchToProps = (dispatch) => {
return { };
};
const PrivacyPolicy = connect(
mapStateToProps,
mapDispatchToProps
)(PrivacyPolicyUI);
export default PrivacyPolicy;
Unconnected component
import React from 'react';
const PrivacyPolicyUI = () => (
<div> ** some content ** </div>
);
export default PrivacyPolicyUI;
I generally disagree with putting "plain" components and their connections in separate files. Most of the time there's a 1:1 correspondence between a component and its connection (ie, the mapState and call to connect are only used with one component, and that component is only used with that call to connect).
I have a saved chat log where I describe why I think separate "containers" / "components" folders are not a good idea. I also just wrote some additional comments on Reddit about structuring component connections.