I am trying to load paths from react-router-dom using the Route but it is only fetching the "/" path, It does not load any other path, the authentication logic was working fine before but with routing nothing seems to be working, If I add any other component to "/" path it will start to load but if I remove "/" and add any other path for instance "/auth" it will display a blank white screen. I have tried a number of ways but couldn't find any solution, I have added the right component they were working smoothly before I added routing, now I am a beginner and it might an easy fix for you guys, Please help me out here because I am stuck ad can't find any solutions. I hope my question is clear.
App.js
import React, {useContext} from 'react';
import Auth from './Components/Auth/Auth';
import Home from './Pages/Home';
import { AuthContext } from './Context/auth-context';
import {Redirect, Route, Switch } from 'react-router-dom';
import About from './Pages/About';
const App = props => {
const authenticated = useContext(AuthContext).auth;
let routes = (
<Switch>
<Route path='/auth' component={Auth} />
<Route path= "/" exact component={Home}/>
<Redirect to="/"/>
</Switch>
);
if(authenticated){
routes = (
<Switch>
<Route path= '/about' component={About}/>
<Route path='/auth' component={Auth} />
<Route path= '/' exact component={Home}/>
<Redirect to='/'/>
</Switch>
)
}
return (
<div>
{routes}
</div>
);
}
export default App;Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ContextProvider from './Context/auth-context';
import {BrowserRouter} from 'react-router-dom';
ReactDOM.render(
<ContextProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</ContextProvider>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();Use exact path for "/" route. In your code the routes contain "exact" keyword, but misplaced
let routes = (
<Switch>
<Route path='/auth' component={Auth} />
<Route exact path= "/" component={Home}/>
<Redirect to="/"/>
</Switch>
);
if(authenticated){
routes = (
<Switch>
<Route path= '/about' component={About}/>
<Route path='/auth' component={Auth} />
<Route exact path= '/' component={Home}/>
<Redirect to='/'/>
</Switch>
)
}
I am not sure if you use Redirect is right there. I don't know how to fix your code but why don't you try that, maybe it will help:
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import ....
.....
const App = props => {
const authenticated = useContext(AuthContext).auth;
return (
<Router>
<Route
exact
path="/auth"
component={Auth}
/>
<Route
exact
path="/"
render={(props) =>(!authenticated ? <Redirect to={'/auth'}/>
:
<Home authenticated={authenticated} {...props} />)}
/>
<Route
exact
path="/about"
render={(props) => (!authenticated ? <Redirect to={'/auth'}
/> :
<About authenticated={authenticated} {...props} />)}
/>
</Router>
)}