I trying to redirect the user to the "TrapPage" if he is not logged in.
Here is my code:
function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname:'/trap'
})
}
}
export default (
<Route path="/" component={App} onEnter={requireAuth}>
<IndexRoute component={DashboardPage} />
<Route path="trap">
<IndexRoute component={TrapPage}/>
</Route>
<Route path="accounts">
<IndexRoute component={AccountPage}/>
<Route path="add" component={AccountAdd} />
<Route path="detail/:id" component={AccountDetail} />
</Route>
<Route path="contacts">
<Route path="detail/:id" component={ContactPage}/>
</Route>
<Route path="transmissors">
<Route path="detail/:id" component={TransmissorPage}/>
</Route>
<Route path="attends" component={AttendancePage} />
<Route path="reports" component={ReportPage} />
<Route path="configs" component={ConfigurationPage} />
</Route>
);
When I put the function requireAuth at onEnter, the console gives me an error:
Uncaught RangeError: Maximum call stack size exceeded
I am a begginer at React, please be patient :)
What is wrong at my code?
You are requiring authentication on the same route that you redirect the user to if he is not logged in. That leads to an infinite loop of redirecting the user because he isn't logged in. Perhaps move out the <Route path="trap"> from underneath the routes that require authentication.
Also, you are missing a third parameter on your function.
function requireAuth(nextState, replace)
should be
function requireAuth(nextState, replace, cb) {
and once you are done with the authentication logic, you need to call cb as such:
function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname:'/trap'
});
}
cb();
}
It's a callback function that will let the flow of the routing continue.
EDIT:
You could re-organize your routes as such:
<Route path="/" component={App}>
<IndexRoute component={DashboardPage} />
<Route path="trap">
<IndexRoute component={TrapPage}/>
</Route>
<Route onEnter={requireAuth}>
<Route path="accounts">
<IndexRoute component={AccountPage}/>
<Route path="add" component={AccountAdd} />
<Route path="detail/:id" component={AccountDetail} />
</Route>
<Route path="contacts">
<Route path="detail/:id" component={ContactPage}/>
</Route>
<Route path="transmissors">
<Route path="detail/:id" component={TransmissorPage}/>
</Route>
<Route path="attends" component={AttendancePage} />
<Route path="reports" component={ReportPage} />
<Route path="configs" component={ConfigurationPage} />
</Route>
</Route>
And then depending on wether you need authentication on your dashboard or not, you could potentially add the onEnter={requireAuth} to that route as well. This will separate out the routes that need authentication from the ones that don't.
Related
I have a following index file -
<BrowserRouter>
<Routes>
<Route path="/" element={Home}
<Route element={Navigation}
</Routes>
</BrowserRouter>
I have multiple routes which I have to load So For that I have written a component:
const Navigation = () => {
<>
<Route path="/not-available-primary" element={NotAvaliable}/>
<Route path="/not-available-Secondary" element={Avaliable}/>
<Route path="/available-primary" element={Primary}/>
<Route path="/available-Secondary" element={Secondary}/>
<Route path="/direct-debit-primary" element={DirectDBB}/>
<Route path="/direct-debit-secondary" element={DirectDBBSecondary}/>
</>
}
But here, it does not render the component and gives no routes matched for location.
How do I fix this ?
You have to give a Component to the element prop, like this:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/*" element={<Navigation />} />
</Routes>
</BrowserRouter>
and
const Navigation = () => {
return (<>
<Route path="/not-available-primary" element={<NotAvaliable />}/>
<Route path="/not-available-Secondary" element={<Avaliable />}/>
<Route path="/available-primary" element={<Primary />}/>
<Route path="/available-Secondary" element={<Secondary />}/>
<Route path="/direct-debit-primary" element={<DirectDBB />}/>
<Route path="/direct-debit-secondary" element={<DirectDBBSecondary />}/>
</>)
}
or
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/*">
<Route path="not-available-primary" element={<NotAvaliable />}/>
<Route path="not-available-Secondary" element={<Avaliable />}/>
<Route path="available-primary" element={<Primary />}/>
<Route path="available-Secondary" element={<Secondary />}/>
<Route path="direct-debit-primary" element={<DirectDBB />}/>
<Route path="direct-debit-secondary" element={<DirectDBBSecondary
/>}/>
</Route>
</Routes>
</BrowserRouter>
Note that in the seconds solution (nested routes) I erased the "/".
Documentation here
in your index file
<Route path="/" compoment={Home}
if "Navigation" is your class
const Navigation = () => {
return (
<>
<Routes>
<Route path="/not-available-primary" component={NotAvaliable}/>
<Route path="/not-available-Secondary" component={Avaliable}/>
<Route path="/available-primary" component={Primary}/>
<Route path="/available-Secondary" component={Secondary}/>
<Route path="/direct-debit-primary" component={DirectDBB}/>
<Route path="/direct-debit-secondary" component={DirectDBBSecondary}/>
</Routes>
</>
)
}
Issue
It's unclear which version of react-router-dom you are trying to use. version 4/5 or 6, but you've syntax issues for either. The route rendering the Navigation component needs a path with a trailing "*" character to be matched at the root/base level so the descendent routes can then also be matched and rendered.
Using react-router-dom#5
Use the Switch component instead of the Routes component. The Route components use the component (or render or children function props). The home path "/" must exactly match in order for any other route to be matched when the path isn't exactly "/", e.g. "/not-available-primary".
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="*" component={Navigation} />
</Switch>
</BrowserRouter>
...
const Navigation = () => {
<Switch>
<Route path="/not-available-primary" component={NotAvaliable} />
<Route path="/not-available-Secondary" component={Avaliable} />
<Route path="/available-primary" component={Primary} />
<Route path="/available-Secondary" component={Secondary} />
<Route path="/direct-debit-primary" component={DirectDBB} />
<Route path="/direct-debit-secondary" component={DirectDBBSecondary} />
</Switch>
};
Using react-router-dom#6
All Route components can only be rendered by a Routes component or another Route component in the case of route nesting. The Route component API changed significantly and there is now only a single element prop taking a ReactNode, a.k.a. JSX, as a value. In RRDv6 all routes are now always exactly matched and use a route ranking system; there is no longer an exact prop for Route components.
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<Navigation />} />
</Routes>
</BrowserRouter>
...
const Navigation = () => {
<Routes>
<Route path="/not-available-primary" element={<NotAvaliable />} />
<Route path="/not-available-Secondary" element={<Avaliable />} />
<Route path="/available-primary" element={<Primary />} />
<Route path="/available-Secondary" element={<Secondary />} />
<Route path="/direct-debit-primary" element={<DirectDBB />} />
<Route path="/direct-debit-secondary" element={<DirectDBBSecondary />} />
</Routes>
};
At the first use <Switch> in Navigation component :
const Navigation = () => {
<Switch>
<Route path="/not-available-primary" component={NotAvaliable}/>
<Route path="/not-available-Secondary" component={Avaliable}/>
<Route path="/available-primary" component={Primary}/>
<Route path="/available-Secondary" component={Secondary}/>
<Route path="/direct-debit-primary" component={DirectDBB}/>
<Route path="/direct-debit-secondary" component={DirectDBBSecondary}/>
</Switch>
}
so, add the component to Route:
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" exact component={LoginForm} />
<Route component={Navigation} />
</Switch>
</BrowserRouter>
I have created routes in app.js and /, /create-receipt and /login routes are working fine but if I go to /signup route or any other route below /login it loads the Login component, if I remove login and signup component then the routes are working perfectly.
App.js:-
<Router>
<Header/>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/create-receipt" component={CreateReceipt} />
<Route Path="/login" component={Login} />
<Route Path="/signup" component={Signup} />
<Route path="/fast-food-receipt" exact component={FastFoodReceipt} />
<Route path="/fast-food-receipt/receipt-one" component={FastFoodReceiptOne} />
<Route path="/fast-food-receipt/receipt-two" component={FastFoodReceiptTwo} />
<Route path="/fast-food-receipt/receipt-three" component={FastFoodReceiptThree} />
<Route path="/fast-food-receipt/receipt-four" component={ReceiptFour} />
<Route path="/fast-food-receipt/receipt-five" component={FastFoodReceiptFive} />
<Route path="" component={NotFound} />
</Switch>
<Footer/>
</Router>
Login.js:-
const Login = () =>{
return(
login page
)
}
export default Login;
Signup.js:-
const Signup = () =>{
return(
signup page
)
}
export default Signup;
NOTE:- issue is coming when i use route component like this
<Route Path="/signup" component={Signup} />
<Route Path="/login" component={Login} />
working fine when i am using route component in this way:-
<Route exact path="/"><Home /></Route>
<Route path="/login"><Login /></Route>
<Route path="/signup"><Signup /></Route>
can some one tell why it is happening
I have routes:
<Switch>
<Route path="/about" component={About} />
<Route path="/about/Us" component={AboutUs} />
<Route path="/about/Company" component={AboutCompany} />
</Switch>
I would like the /about route to show about component and its children (AboutUs and AboutCompany) but the /about route is only rendering About component. How can I fix that? I have react-router 4
There are 2 ways you can achieve it.
Creating nested routes from routes.js/jsx
Creating nested routes from the parent component (about.js/jsx)
If it is from routes.js/jsx
<Switch>
<Route path="/about" component={About}>
<Route path="/about/Us" component={AboutUs} />
<Route path="/about/Company" component={AboutCompany} />
</Route>
</Switch>
If it is from routes.js/jsx
//Routes.jsx/js
<Switch>
<Route path="/about" component={About} />
</Switch>
and
//About.jsx/js
<Switch>
<Route path="/about/Us" component={AboutUs} />
<Route path="/about/Company" component={AboutCompany} />
</Switch>
<Switch>
<Route exact path="/about" component={About} />
<Route path="/about/Us" component={AboutUs} />
<Route path="/about/Company" component={AboutCompany} />
</Switch>
You need to add the exact keyword to About parent path.
What's wrong with my route structure? Used Link to navigate couldn't see the changes.
class App extends React.Component {
render() {
return(
<BrowserRouter>
<div>
<AuthRoute></AuthRoute>
<Switch>
<Route path='' component={Home} />
<Route path='/profile' component={Profile} />
</Switch>
</div>
</BrowserRouter>
)
}
}
https://codesandbox.io/s/r433m6kvvp
Changes:
1- Instead of path='' (blank path) use path='/'.
2- Use exact word with path='/' otherwise define that in that last, because if you don't use exact then / will match with /profile or any other route also.
Check the doc for more details about exact and Switch and how they work.
Like this:
<Route exact path='/' component={Home} />
<Route path='/profile' component={Profile} />
or
<Route path='/profile' component={Profile} />
<Route path='/' component={Home} />
Working Code.
I am planning to have the following route setup in my app. I am currently using React-Router 2.7.
/
/stored_systems
/stored_systems/schemas/:schema_id
/stored_systems/schemas/:schema_id/systems/:system_id
/runtime
/runtime/mainlines/:mainline_id
/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id
I have written the router configuration as follows.
<Route path='/' component={App}>
<IndexRoute component={StoredSystems} />
<Route path='/stored_systems' component={StoredSystems} >
<IndexRoute component={SchemasList} />
<Route path='/stored_systems/schemas/:schema_id' component={Schema} />
<Route path='/stored_systems/schemas/:schema_id/systems/:system_id' component={System} />
</Route>
<Route path='/runtime' component={Runtime} >
<IndexRoute component={MainLinesList} />
<Route path='/runtime/mainlines/:mainline_id' component={Mainline} />
<Route path='/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id' component={ValveGroup} />
</Route>
</Route>
The StoredSystems and Runtime are stateless components which basically render {props.children}.
Now, if I go to /stored_systems, it will properly render the SchemasList component. Routes like /stored_systems/schemas/schema1 would render properly.
However, if I go to /, it will render the StoredSystems component, without its children. Well, there aren't really any children defined, because it is loading an IndexRoute.
How do I render the SchemaList inside StoredSystems when I navigate to the root?
Move the / in your path and setup routes like
<Route component={App}>
<Route path = '/' component={StoredSystems} >
<IndexRoute component={SchemasList} />
</Route>
<Route path='/stored_systems' component={StoredSystems} >
<IndexRoute component={SchemasList} />
<Route path='/stored_systems/schemas/:schema_id' component={Schema} />
<Route path='/stored_systems/schemas/:schema_id/systems/:system_id' component={System} />
</Route>
<Route path='/runtime' component={Runtime} >
<IndexRoute component={MainLinesList} />
<Route path='/runtime/mainlines/:mainline_id' component={Mainline} />
<Route path='/runtime/mainlines/:mainline_id/valve_groups/:valve_group_id' component={ValveGroup} />
</Route>
</Route>