This is my first time implementing a recaptch and I am not 100% sure if It is working correctly.
<GoogleReCaptchaProvider
reCaptchaKey="[key]"
language="english"
>
<React.StrictMode>
<MuiThemeProvider theme={themeMui}>
<StylesProvider injectFirst>
<Provider store={store}>
<App />
</Provider>
</StylesProvider>
</MuiThemeProvider>
</React.StrictMode>
,
</GoogleReCaptchaProvider>,
document.getElementById('root'),
);
I have just added this into my index.tsx file because the documentation says it should be at the highest point in your react tree.
Is this all I need? or am I missing a few steps??
Related
This question already has answers here:
How do I convert BrowserRouter react code for nextjs?
(2 answers)
Closed 4 months ago.
I'm trying to use BrowserRouter in my Next.js web app to route between different pages based on whether or not a user is logged in which I check by looking at my global state variable user through my useAuthContext hook that I made. Currently, I'm getting this error:
ReferenceError: document is not defined
at getUrlBasedHistory (C:\Users\simer\Downloads\Talkhappi\client\node_modules\#remix-run\router\dist\router.cjs.js:380:14)
at Object.createBrowserHistory (C:\Users\simer\Downloads\Talkhappi\client\node_modules\#remix-run\router\dist\router.cjs.js:207:10)
at BrowserRouter (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-router-dom\dist\umd\react-router-dom.development.js:256:35)
at processChild (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at Object.renderPage (C:\Users\simer\Downloads\Talkhappi\client\node_modules\next\dist\next-server\server\render.js:50:851)
at Function.getInitialProps (C:\Users\simer\Downloads\Talkhappi\client\.next\server\pages\_document.js:299:19)
I don't know why there's an error happening, here is the code to my index.js file which is where I put the BrowserRouter routing code:
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useAuthContext } from 'hooks/useAuthContext';
import HomePage from './home';
import ProductPage from './product';
import LoginPage from './login';
import SignupPage from './signup';
export default function IndexPage() {
const { user } = useAuthContext()
return (
<div>
<BrowserRouter>
<div>
<Routes>
<Route
path="/"
element={<HomePage />}
/>
<Route
path="/login"
element={!user ? <LoginPage /> : <Navigate to="/" />}
/>
<Route
path="/signup"
element={!user ? <SignupPage /> : <Navigate to="/" />}
/>
<Route
path="/product"
element={!user ? <ProductPage /> : <Navigate to="/" />}
/>
</Routes>
</div>
</BrowserRouter>
</div>
);
}
You don’t need all this unnecessary tools in a great framework like Next.js
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
Try and go through the docs
import Link from 'next/link'
<Link href="/">
<a>Home</a>
</Link>
Using Conditionals
<Link href={!user ? "/loginPage" : "/"}>
<a>{!user ? "Login" : "Home"}</a>
</Link>
I am making a dashboard for my project but got stuck on a problem, where I need to navigate to login from my dashboard. I want this login path to be seen separately from my app, but they are overlapping each other, how can I solve this?
This is my app.jsx
import "./App.css";
import React , { useState } from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Container from "./components/Container/Container";
import RightNavbar from "./components/RightNavbar/RightNavbar";
import Dashboard from "./components/Dashboard/Dashboard";
import Analytics from "./components/Analytics/Analytics";
import Campaings from "./components/Campaigns/Campaigns";
import Team from "./components/Team/Team";
import Login from './components/Registeration/Login';
import NavContext from "./Context/NavContext";
function App() {
const [nav, setNav] = useState(false);
const value = { nav, setNav };
return (
<div className="App">
<NavContext.Provider value={value}>
<Navbar />
<Container
stickyNav={<RightNavbar />}
content={
<Routes>
<Route path="*" element={<main>NOT FOUND</main>} />
<Route path="/" element={<Dashboard />} />
<Route path="/analytics" element={<Analytics />} />
<Route path="/campaings" element={<Campaings />} />
<Route path="/team" element={<Team />} />
</Routes>
}
/>
</NavContext.Provider>
<Routes><Route path = '/login' element = {<Login/>}/></Routes>
</div>
);
}
export default App;
Here is the picture of my dashboard, you can clearly see the login on far-right which should be displayed separately.
I have read through the documentations of Next.Js and I understood that by creating a _app.js file it will override the default App.js file, So those component in the _app.js file will show on every page and that's what I need, But I also need to exclude some of those components from rendering in the slug, Like the Header or Footer for example I wanna show them on all pages except for the slug, How can I do that ?
here is my code for the _app.js
import React from 'react'
import Head from 'next/head';
import { ThemeProvider } from '#material-ui/core/styles';
import Header from '#/components/Header/Header'
import theme from '#/theme/theme';
function MyApp({ Component, pageProps }) {
return (
<Head>
<title>My App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<ThemeProvider theme={theme}>
<Header />
<main>
<Component {...pageProps} />
</main>
</ThemeProvider>
)
}
And this is my slug
import React from 'react'
const MyAccounts = ({ data }) => {
const post = data && data.posts[0]
return (
<>
<div>
<article>
{post.feature_image ?
<figure >
<img src={post.feature_image} alt={post.title} />
</figure> : null}
<section >
<h1>{post.title}</h1>
</section>
</article>
</div>
</>
)
}
export default MyAccounts
So in this Code I dont want the component Head to show in my slug, How do I exclude it ?
In the _app.js you have the pageProps, you can leverage that. Set some property in it and render based on that.
Something like:
function MyApp({ Component, pageProps }) {
return (
<Head>
<title>My App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<ThemeProvider theme={theme}>
{pageProps.noLayout ? <></> : <Header />}
<main>
<Component {...pageProps} />
</main>
</ThemeProvider>
)
}
and then on the page add for example:
export async function getStaticProps(context) {
return {
props: { noLayout: true },
}
}
I want to give my new React app a consistent look and feel using Material-UI. Also, I want the styles and such to be easily maintainable. So the default theme seems like a pretty good start. The cssBaseline offered by Material-UI seems to check all the boxes, so I want to give it a try. The thing is, surprise, it's not working. Css themes aren't really my thing. Am I misguided here or what? The following code is what I've implemented in my App.js component with no luck (taken from here ). I'm hoping is just an implmentation detail.
import React from "react";
import Footer from "./Footer";
import CssBaseline from "#material-ui/core/CssBaseline";
import AddTodo from "../containers/AddTodo";
import VisibleTodoList from "../containers/VisibleTodoList";
const App = () => (
<React.Fragment>
<CssBaseline />
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
</React.Fragment>
);
export default App;
EDIT: This is the index.js located in the root of the project:
import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import App from "./components/App";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<React.Fragment>
<CssBaseline />
<App />
</React.Fragment>
</MuiThemeProvider>
</Provider>,
document.getElementById("root")
);
EDIT: My new App.js
import React from "react";
import Footer from "./Footer";
import AddTodo from "../containers/AddTodo";
import AppBar from "../components/AppBar";
import VisibleTodoList from "../containers/VisibleTodoList";
const App = () => (
<div>
<AppBar />
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
export default App;
The CSSBaseline component should be used inside a Material UI ThemeProvider component.
In your example you did not include a ThemeProvider so there is no Material UI theme.
See official documentation for how to setup ThemeProvider : https://material-ui.com/customization/themes/#muithemeprovider
Based on this sample, a minimal working example with CSSBaseline would be :
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import CssBaseline from "#material-ui/core/CssBaseline";
import Root from './Root';
const theme = createMuiTheme();
function App() {
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<CssBaseline />
<Root />
</React.Fragment>
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app'));
To get the Roboto font loaded, add this to your html template
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
For a more complete sample, look at the source code of this official sample : https://github.com/mui-org/material-ui/tree/master/examples/create-react-app/src
public/index.html : loading of roboto font
src/withRoot.js : ThemeProvider and CSSBaseline setup
src/pages/index.js : sample components with MUI theme applied
I'm using React and React Router to build the front-end of a site that uses Wordpress as a back-end. The front-end is entirely made in React except for a few pages, such as the login page, for which I have to use a standard Wordpress theme. So if my site is http://example.com, when I go to http://example.com/login I need to 'switch' to the Wordpress theme.
How can I do this with React Router? Is that even possible?
Here are my current routes:
class App extends React.Component {
render() {
return (
<div>
<MainHeader />
<Switch>
<Route exact path="/" component={ HomePage } />
<Route path="/you/" component={ UserDashboard } />
<Route path="/search/" component={ SearchForm } />
<Route path="/:slug" component={ SinglePost } />
<Route render={ () => { return( <p>Not Found</p> ) } } />
</Switch>
</div>
);
}
}