How to remove following warning or any alternative way to add custom routes in react-admin without default appLayout?
Warning: You should not use <Route component> and <Route render> in
the same route; <Route render> will be ignored
import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Route } from 'react-router-dom';
import restProvider from 'ra-data-simple-rest';
class App extends Component {
render() {
return (
<Admin
title="react-admin"
dataProvider={restProvider('http://localhost:3000')}
customRoutes={[<Route exact path="/custom" component={()=><div>Custom page without layout</div>} noLayout /> ]}
>
<Resource name="test" list={() => <div>Test Resource</div>} />
</Admin>
);
}
}
export default App;
Use children instead of component in your route:
class App extends Component {
render() {
return (
<Admin
title="react-admin"
dataProvider={restProvider('http://localhost:3000')}
customRoutes={[<Route exact path="/custom" noLayout><div>Custom page without layout</div></Route>]}
>
<Resource name="test" list={() => <div>Test Resource</div>} />
</Admin>
);
}
}
export default App;
Related
So I am making a react app with semantic ui, that communicates with my own backend and displays news. I want to use pagination, that I tried to make it like it is said in this article: https://www.codementor.io/#maseh87/paginating-a-react-app-with-semantic-ui-x1g4a0t79
So here is my app.tsx:
import { Component } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import Navbar from "./components/navbar/Navbar";
import MainPage from "./pages/MainPage";
import NewsDetailPage from "./pages/NewsDetailPage";
interface AppProps {}
interface AppState {}
class App extends Component<AppProps, AppState> {
render() {
return (
<div>
<header>
<Navbar />
</header>
<div className="ui container" style={{paddingBottom: "2rem"}}>
<Routes>
<Route path="/news/:id" element={<NewsDetailPage />} />
<Route path="/news" element={<MainPage />} />
<Route path="*" element={<Navigate to="/news" replace />} />
</Routes>
</div>
</div>
);
}
}
export default App;
And my main page, this includes the pagination:
import { useEffect, useState } from "react";
import NewsList from "../components/news list/NewList";
import { NewsModel } from "../models/news.model";
import { newsService } from "../services/news.service";
import MainNews from "../components/main news/MainNews";
import { Pagination } from 'semantic-ui-react';
const MainPage = () => {
const [news, setNews] = useState<NewsModel[]>([]);
const [activePage, setActivePage] = useState(1);
const [apiUrl, setApiUrl] = useState('http://localhost:3001/api/');
useEffect(() => {
const fetchNews = async () => {
setNews(await newsService.getNews());
};
fetchNews();
}, []);
const [main, ...rest] = news;
const onChange = (pageInfo: any) => {
setActivePage(pageInfo.activePage);
setApiUrl('http://localhost:3001/api/?page=' + activePage.toString());
};
return (
<div>
<MainNews main={main} />
<NewsList news={rest} />
<Pagination
activePage={activePage}
onPageChange={onChange}
totalPages={10}
ellipsisItem={null}
/>
</div>
);
};
export default MainPage;
So I want to display the first piece of news with a different style and then the list of remaining news. But I also want this on only the first page, on the rest I just want to see the list.
But what is wrong with the pagination things? It displays the numbers of the pages, but nothing happens when I click on the next page.
UPDATE!!!
Ok I have fixed all issues, they just needed (foo) to be added to them and for MyButton.js it just needed to be a variable and then exported, HOWEVER I still have this gray background when i create it as a static server, or try to serve it on firebase?! this is what I see.
[![enter image description here][5]][5]
I suspect it is either express or MUITheme from material-ui its also worth noting that if I click the deployed firebase link it opens automatically in my chrome that has react developer tools and redux devtools connected to the site and runs perfectly fine. Below is my App.js code.
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
import { ThemeProvider } from '#material-ui/core/styles';
import { unstable_createMuiStrictModeTheme as createMuiTheme } from '#material-ui/core/styles';
import themeFile from './util/theme';
import jwtDecode from 'jwt-decode';
// Redux
import { Provider } from 'react-redux';
import store from './redux/store';
import { SET_AUTHENTICATED } from './redux/types';
import { logoutUser, getUserData } from './redux/actions/userActions';
// Components
import Navbar from './components/layout/Navbar';
import AuthRoute from './util/AuthRoute';
// import themeObject from './util/theme';
// Pages
import home from './pages/home';
import login from './pages/login';
import signup from './pages/signup';
import user from './pages/user';
import axios from 'axios';
const theme = createMuiTheme(themeFile);
axios.defaults.baseURL = "https://NOT SHOWING YOU THIS BUT TRUST ME ITS CORRECT.cloudfunctions.net/api";
const token = localStorage.FBIdToken;
if(token){
const decodedToken = jwtDecode(token);
if(decodedToken.exp * 1000 < Date.now()){
store.dispatch(logoutUser())
window.location.href = '/login';
} else {
store.dispatch({ type: SET_AUTHENTICATED });
axios.defaults.headers.common['Authorization'] = token;
store.dispatch(getUserData());
}
}
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<Provider store={store}>
<Router>
<Navbar />
<div className="container">
<Switch>
<Route exact path="/" component={home}/>
<AuthRoute exact path="/login" component={login} />
<AuthRoute exact path="/signup" component={signup} />
<Route exact path="/users/:handle" component={user} />
<Route exact path="/users/:handle/scream/:screamId" component={user} />
</Switch>
</div>
</Router>
</Provider>
</ThemeProvider>
)
}
}
export default App;
Don't know if this is a good question or not. However, I have been searching for hours and I cannot find a satisfactory answer for my problem. To keep things short, in my router, when I route to /dashboard; I want to check if the user is logged in. If the user is not logged in, I want to redirect him to my login page. Only problem, I am receiving my isAuthenticated(is logged in) variable from redux, which takes a second to load. Thus, whenever I check, my variable turns out to be null.
Here is the code,
import React, { Component } from "react";
import Home from "./pages/Home";
import Testimonials from "./pages/Testimonials";
import Pricing from "./pages/Pricing";
import Login from "./pages/Login";
import Register from "./pages/Register";
import DashboardHome from "./pages/Dashboard/DashboardHome";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
class AppRouter extends Component {
static propTypes = {
isAuthenticated: PropTypes.bool
};
render() {
return (
<Router>
<Switch>
<Route path="/register">
<Register />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/pricing">
<Pricing />
</Route>
<Route path="/testimonials">
<Testimonials />
</Route>
<Route path="/dashboard">
this.props.isAuthenticated ?<DashboardHome /> :
<Redirect to="/login" />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, {})(AppRouter);
Much appreciation to anyone who helps out. Still new to react and redux.
You can set your components defaultProps. More info here: https://reactjs.org/docs/react-component.html#defaultprops
AppRouter.defaultProps = {
isAuthenticated: false
};
Note: React's experimental Suspense component could be useful to you if you're looking to render a loading component while the user is being authenticated. More info here: https://reactjs.org/docs/concurrent-mode-suspense.html
I am currently working with node.js and have this question,
How can i go from one page to the other by clicking the "test" button? I am trying to get from ./Landing to ./Login by pressing the button
This is my code:
import React, { Component } from 'react'
import { Route, NavLink, HashRouter } from "react-router-dom";
import Login from "./Login";
class Landing extends Component {
render () {
return (
<button type="submit" class="btn btn-test">test</button>
);
}
}
export default Landing
Thank you in advance for your help!
J, you can look for the react-router-dom
On a summarised way, you will need to this:
Import react-router-dom dependencies
Create router.js file, like this:
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { components } from './YOUR_COMPONENTS_FOLDER'
const Router = () => (
<main>
<BrowserRouter>
<Switch>
<Route exact path="/" component={components.mainComponent} />
<Route exact path="/login" component={components.loginComponent} />
<Route component={components.notFoundComponent} />
</Switch>
</BrowserRouter>
</main>
)
export default Router
Add this router.js file into your App.jsx:
import Router from './router'
...
class component extends React.PureComponent {
...
render() {
...
return (
...
<Router />
...
)
}
}
Once you add Router into App.jsx file, remove any reference of your old code for main page.
To open a page, you will add this to your component:
import { Link } from 'react-router-dom'
...
render () {
<Link to="/login">
YOUR BUTTON or something else to be clicked
</Link>
}
...
Here are some references that may help you:
https://reacttraining.com/react-router/web/guides/quick-start
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/
Hence you can use react router you could add one more route
Look at below example link for more details
[CodePen] https://codepen.io/dwarka/pen/PLEMWX
I'm using 15.0.1 and using React to create Universal app
I was getting React is not defined in the following component
import {Component} from "react";
export default class HeroSearchView extends Component{
render() {
return (
<div className='row'>
hello
</div>
);
}
}
The following code call that React component
import React from "react";
import { connect } from 'react-redux'
import Coupon from '../../common/components/Coupon'
import { actions as miscActions } from '../../redux/modules/misc'
import HeroSearchView from './components/HeroSearchView'
const mapStateToProps = (state) => ({
misc:state.misc
})
export class HomeView extends React.Component{
render() {
return (
<div>
<HeroSearchView />
<Coupon {...this.props} />
</div>
);
}
}
export default connect(mapStateToProps, Object.assign({}, miscActions))(HomeView)
I'm kind of scratching my head now what the following message means ...
ReferenceError: React is not defined
at HeroSearchView.render (HeroSearchView.jsx:8:13)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:679:34)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:699:32)
at [object Object].wrapper [as _renderValidatedComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:284:30)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:237:21)
at [object Object].wrapper [as mountComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactReconciler.js:39:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactMultiChild.js:203:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactDOMComponent.js:589:32)
[ Note ] : If I remove <HomeSearchView /> from my example code, it works fine ...
Any tips will be appreciated ...
You need to use
import React from "react"
and
export default class HeroSearchView extends React.Component
This is because JSX convert your file to actual JS that calls React.createElement, and because you only imported Component from react, it couldn't find references to React
You can do something like this to keep your code tidy.
import React, {Component} from "react";
export default class HeroSearchView extends Component {
render() {
return (
<div className='row'>
hello
</div>
);
}
}
import React from "react";
export default class HeroSearchView extends React.Component{
render() {
return (
<div className='row'>
hello
</div>
);
}
}
Change to this and it will work.
If you are using Rails, then possible cause of error is that you added
//= require react
//= require react_ujs
//= require components
into your app/assets/javascripts/application.js