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 19 days ago.
Improve this question
I'm trying to build a dynamic route in react, but I've gotten stuck. I'm pretty sure the code is correct but the browser keeps saying: Uncaught TypeError: Cannot read properties of undefined (reading 'match'). The issue is in the last route for the component ItemPage.
routes code:
<Navbar />
<Routes>
<Route path='/' element={<Index />} />
<Route path='/invierno' element={<Invierno />} />
<Route path='/verano' element={<Verano />} >
<Route path='detalles' element={<DetallesInf />} />
</Route>
<Route path='/cart' element={<Cart />} />
<Route path='/login' element={<Login />} />
<Route path='/register' element={<Signin />} />
<Route path='/item/:id' element={<ItemPage />} />
</Routes>
<Footer />
ItemPage:
import React from 'react'
import { useParams } from 'react-router'
export default function ItemPage() {
const { id } = useParams();
return (
<div>
<h1>Product details {id}</h1>
</div>
)
}
I tried this <Route path='/item/:id' element={({ match }) => <ItemPage match={match} />} /> and this <Route path='/item/:id' render={props => <ItemPage {...props} />} /> but neither of them worked.
Related
This question already has answers here:
How to create a protected route with react-router-dom?
(5 answers)
Closed last month.
Error
Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
Private Router
function PrivateRoute({ children, ...rest }) {
const auth = useAuth();
return (
<Route
{...rest}
render={() => {
if(auth.user){
return children;
}
return <Navigate to='/login' />
}}
/>
);
}
App.js
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/register" element={<Signup />} />
<Route exact path="/settings" element={<PrivateRoute><Settings /></PrivateRoute>} />
<Route element={<Page404 />} />
</Routes>
</Router>
</div>
);
I was trying to Privating the route for settings , but got error.
Can you try to replace your settings route by this :
<Route exact path="/settings" component={PrivateRoute}><Settings /></Route>
The following code (codesandbox) produces this warning when the root url is navigated to:
You rendered descendant (or called useRoutes()) at "/" (under <Route path="">) but the parent route path has no trailing "*"...
However, no warning is issued if I navigate to "/post/blah".
import { Routes, Route} from "react-router-dom";
const StreamPage = () => (
<>
<Routes>
<Route index element={<div /> } />
<Route path="post/:subslug/*" element={<div /> }/>
</Routes>
<Routes>
<Route index element={<div />} />
<Route path="post/:subslug/*" element={<div />} />
</Routes>
</>
)
export const App = () => (
<Routes>
<Route path="/" >
<Route path="post/*" element={<StreamPage />} />
<Route index element={<StreamPage />} />
</Route>
</Routes>
)
I know, I could fix the code by merging the two Routes blocks in StreamPage but I'm asking if this is expected behavior and if so what part of the react-router usage contract/API I'm violating? For instance, am I not allowed to have don't have sibling index routes under an index route? If I don't understand when/why this warning is produced I won't be able to avoid it in the future.
(related to this earlier question)
The following React routes code probably works in React Router v5, but gives the following error in React Router v6
Error: [Player] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Is it possible to update the Routes/Route code so that it works in React Router v6?
function App() {
// Some stuff here...
const { players, offlinePlayers } = usePlayers();
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/players">
{players.map((player) => {
return (
<Route exact key={player.name} path={`/players/${player.name}`}>
<Player player={player} />
</Route>
);
})}
</Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
)
}
The Player component should be rendered by a Route component on the element prop, not as a child of the Route.
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/players">
{players.map((player) => (
<Route
key={player.name}
path={`/players/${player.name}`}
element={<Player player={player} />}
/>
))}
</Route>
</Routes>
</BrowserRouter>
You should map Routes in their parent route.
Like:
<Route path="/players">
{players.map((player) => (
<Route exact key={player.name} path={`/players/${player.name}`}>
<Player player={player} />
</Route>
);
)}
</Route>
But if you want to render dynamic player then dont use the above code for that purpose because its not best approach if you are using dynamic player.name. In your code you are creating each route for every player.
So, use the following code:
<Route path="/players">
<Route exact path={":playerName"} element={<Player/>} />
</Route>
And in Player component, extract playerName from params like:
let { playerName } = useParams();
This question already has answers here:
ESLint - Component should be written as a pure function (react prefer/stateless function)
(9 answers)
Closed 2 years ago.
I am getting this eslint error, only for the app component "Component should be written as a pure function" and i am not sure why.
I checked other posts with this error and none of the solution seem to work.
import React from "react";
import { Switch, Route } from "react-router-dom";
import NotFound from "../Pages/Standalone/NotFoundDedicated";
import Auth from "./Auth";
import Application from "./Application";
import LoginDedicated from "../Pages/Standalone/LoginDedicated";
import ArticleNews from "./ArticleNews";
import ThemeWrapper, { AppContext } from "./ThemeWrapper";
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
class App extends React.Component {
render() {
return (
<ThemeWrapper>
<AppContext.Consumer>
{changeMode => (
<Switch>
<Route path="/" exact component={LoginDedicated} />
<Route
path="/app"
render={props => <Application {...props} changeMode={changeMode} />}
/>
<Route
path="/blog"
render={props => <ArticleNews {...props} changeMode={changeMode} />}
/>
<Route component={Auth} />
<Route component={NotFound} />
</Switch>
)}
</AppContext.Consumer>
</ThemeWrapper>
);
}
}
export default App;
Your component contains no state, but you are using the form that supports state. There is some overhead that comes with extending React.Component that can be avoided in this case.
Just alter your class to look like
function App(props) {
return (
<ThemeWrapper>
<AppContext.Consumer>
{changeMode => (
<Switch>
<Route path="/" exact component={LoginDedicated} />
<Route
path="/app"
render={props => <Application {...props} changeMode={changeMode} />}
/>
<Route
path="/blog"
render={props => <ArticleNews {...props} changeMode={changeMode} />}
/>
<Route component={Auth} />
<Route component={NotFound} />
</Switch>
)}
</AppContext.Consumer>
</ThemeWrapper>
);
}
I am using ReactJS, redux, and react-router. I am using localStorage to log in users automatically. My App.js looks like this:
` <Router>
<Provider store={store}>
<div className="App">
<Route path="/" component={NavBar} />
<Route exact path="/" component={Home} />
<Route exact path="/list" component={RoadmapList} />
<Route path="/roadmap" component={OneRoadmap} />
<Route path="/search" component={Search} />
<Route exact path="/add" component={RoadmapAdder} />
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route
exact
path="/savedRoadmaps"
component={SavedRoadmapsView}
/>
<Route path="/profile" component={AuthorProfile} />
<Route exact path="/account/edit" component={Profile} />
</div>
</Provider>
</Router>`
I previously did auto-authentication in my NavBar component since NavBar will be in every single URL because of the <Route path="/" component={NavBar}/>, I thought I could've just used NavBar to auto-login my users using a redux action called loginUser and then update a few redux states like isAuthenticated and user_info. The problem is that if I were to render NavBar and let's say SavedRoadmapsView, SavedRoadmapsView wouldn't get the redux states immediately since it runs parallel with NavBar.
I have tried to login Users automatically in App.js, like:
` async componentDidMount() {
var email = localStorage.getItem("email");
var password = localStorage.getItem("password");
var userData = { email: email, password: password };
await loginUser(userData);
}`
It didn't seemed to work. Could it be that loginUser is a redux action and can't be used outside of Provider? What are your insights on this? Thanks in advance.