I have a React app with a conflict between two routes:
<Route exact path="/app/participants/register" component={ParticipantRegistration}/>
<Route exact path="/app/participants/:participantID" component={ParticipantDetailed}/>
The first Route, renders fine. However, due to the /:participantID wildcard in the path of the second Route - both the ParticipantRegistration and ParticipantDetailed components render - despite using the exact parameter.
How can I get React to render only the ParticipantRegistration component when the path is /app/participants/register and not render the ParticipantDetailed component underneath?
I would prefer not to have to modify the paths as the app has a few other conflicts like this and keeping track of all the different paths is difficult enough as it is.
You can use a Switch to render only the one route at a time.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "./styles.css";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/x/register" component={() => <p>x</p>} />
<Route path="/x/:id" component={() => <p>y</p>} />
</Switch>
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
You can play with the code here
Related
I have created a route '/' which renders a Home component but the component is not getting rendered.
Below is the error
react-dom.development.js:18970 The above error occurred in the <BrowserRouter> component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:43555:5)
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Below is the app.js code
import React from 'react';
import './App.css';
import {Route, BrowserRouter , Routes} from 'react-router-dom';
import Home from './pages/Home';
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path="/" element ={<Home/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Below is the Home.js code
import React from 'react'
function Home() {
return (
<div>
<h1>Home Page</h1>
</div>
)
}
export default Home
The problem is the dependency modules' compatibility, you can remove the node_modules folder with rm -rf ./node_modules and run npm i or yarn to install the dependencies all again. Hope it helps!
i'm trying to upload my create-react-app site to Cloudflare Pages, and everything's been going great, However, when I add this line: import NotFoundPage from "pages/NotFound.js"; of code to my App.js, it throws a rather odd error:
22:57:43.995 Failed to compile.
22:57:43.996
22:57:43.996 ./src/App.js
22:57:43.996 Cannot find module: 'pages/NotFound.js'. Make sure this package is installed.
22:57:43.996
22:57:43.996 You can install this package by running: npm install pages/NotFound.js.
What makes this even more confusing, is the code right above it works completely fine:
import PrivacyPolicyPage from "pages/PrivacyPolicy.js";
import TermsOfUsePage from "pages/TermsOfUse.js";
import NotFoundPage from "pages/NotFound.js";
Is anyone aware of why this is happening, and most importantly, why the app is building on my home environment (Windows 11) and not Cloudflare Pages?
The code of NotFound.js:
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import ScrollToTop from 'components/ScrollToTop';
import NotFound from 'components/NotFound';
import Sidebar from 'components/Sidebar';
import Navbar from 'components/Navbar';
import Footer from 'components/Footer';
function NotFoundPage() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<Helmet>
<link rel="stylesheet" href="/css/notfound.css" />
</Helmet>
<ScrollToTop />
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar noFade toggle={toggle} />
<NotFound />
<Footer sticky />
</>
);
}
export default NotFoundPage;
And App.js:
import React from "react";
import "App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "pages";
import PrivacyPolicyPage from "pages/PrivacyPolicy.js";
import TermsOfUsePage from "pages/TermsOfUse.js";
import NotFoundPage from "pages/NotFound.js";
function App() {
return (
<Router>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/privacy-policy" component={PrivacyPolicyPage} exact />
<Route path="/terms-of-use" component={TermsOfUsePage} exact />
<Route component={NotFoundPage} />
</Switch>
</Router>
);
}
export default App;
NOTE: I have tried it with ./ at the start of the import string, tried adding {} around the import object, and neither of those work either, throwing the same error. npm build with Browserify - Error: Cannot find module did not help.
Thank you to anyone who can help.
I managed to fix the issue by (and I know how odd this sounds) renaming the pages directory to page. My guess is that Cloudflare is doing some weird stuff with that, but I can't really be sure.
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