I have a basic portfolio app that has the following structure:
App.js
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
When I click on the link to go the production site it only renders the LeftNav, RightNav, and Navbar. I have to click on the Home component to have the Home Screen load.
I then tried putting the Home component outside of to look like:
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Home />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
This is the action I want upon clicking on the link, however then my components don't load. How do I structure this so that the Home component loads up on the initial click and that I'm able to navigate to other pages?
Your first version is good, just add a redirect and change the home path
import React from 'react';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom'; // import Redirect
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/home' exact /> // change the path
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
<Route path="/" exact> // Add the redirect
<Redirect to="/home" />
</Route>
</Switch>
</BrowserRouter>
)
}
You will have to exchange your home path from being the default page:
<Route component={Home} path='/' exact />
to
<Route component={Home} path='/home' exact />
and then add a 'Redirect' to your App.js :
<Route path="/" exact>
<Redirect to="/home" />
</Route>
Related
I would like all routes other than those registered below to direct me to the main page.
example:
testexample.com/contact
-> Returns me to the contact page
testexample.com/sdlskdsd
-> Route does not exist, return to main page
import {
BrowserRouter,
Routes,
Route
} from 'react-router-dom'
import Footerpage from './components/footerpage/Footerpage';
import Navegation from './components/navegation/Navegation';
import Homepage from './pages/Homepage';
import Contact from './pages/contact/Contact';
import Bookpage from './pages/bookpage/Bookpage';
import Success from './pages/contact/status/Success';
import Error from './pages/contact/status/Error';
function App() {
return (
<BrowserRouter>
<Navegation />
<Routes>
<Route path='/' exact element={<Homepage />} />
<Route path='/contact' exact element={<Contact />} />
<Route path='/contactsuccess' exact element={<Success />} />
<Route path='/contacterr' exact element={<Error />} />
<Route path='/bookpage' exact element={<Bookpage />} />
</Routes>
<Footerpage />
</BrowserRouter>
);
}
export default App;
Redirect unknown/unhandled routes to the "/" path with the Navigate component.
<Route path="*" element={<Navigate to="/" replace />} />
Also, in RRDv6 all routes are now always exactly matched, there is no longer any exact prop, so these should all be removed.
Full routes example:
import {
BrowserRouter,
Routes,
Route,
Navigate
} from 'react-router-dom';
...
<Routes>
<Route path='/' element={<Homepage />} />
<Route path='/contact' element={<Contact />} />
<Route path='/contactsuccess' element={<Success />} />
<Route path='/contacterr' element={<Error />} />
<Route path='/bookpage' element={<Bookpage />} />
<Route path="*" element={<Navigate to="/" replace />} /> // <-- redirect
</Routes>
Add a default route
import {
BrowserRouter,
Routes,
Route
} from 'react-router-dom'
import Footerpage from './components/footerpage/Footerpage';
import Navegation from './components/navegation/Navegation';
import Homepage from './pages/Homepage';
import Contact from './pages/contact/Contact';
import Bookpage from './pages/bookpage/Bookpage';
import Success from './pages/contact/status/Success';
import Error from './pages/contact/status/Error';
function App() {
return (
<BrowserRouter>
<Navegation />
<Routes>
<Route path='/' exact element={<Homepage />} />
<Route path='/contact' exact element={<Contact />} />
<Route path='/contactsuccess' exact element={<Success />} />
<Route path='/contacterr' exact element={<Error />} />
<Route path='/bookpage' exact element={<Bookpage />} />
<Route element={<Homepage />} />
</Routes>
<Footerpage />
</BrowserRouter>
);
}
export default App;
Another way of doing it
<Routes>
<Route path='/' exact element={<Homepage />} />
<Route path='/contact' exact element={<Contact />} />
<Route path='/contactsuccess' exact element={<Success />} />
<Route path='/contacterr' exact element={<Error />} />
<Route path='/bookpage' exact element={<Bookpage />} />
<Route path='/*' element={<Homepage />} />
</Routes>
In my code, I want Header & Footer components to be rendered in all routes except '/login'so how to do that? How to hide component on a specific route?
const AppRouter = () => {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/login" component={Login} /> {/* I wanna render this route without Header & Footer */}
<Route path="/" component={Home} exact />
<Route path="/product" component={ProductOverview} />
<Route path="/profile" component={Profile} />
<Route component={NotFound} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
};
Consider the Router :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
</Switch>
</section>
</Fragment>
</Router>
When the user hits a url like http://localhost:3000/dashboard or any other url from the
listed above , is being forward to the corresponding component.
However when users hit http://localhost:3000/ddlksajldsajk or http://localhost:3000/dashboard1
nothing is being rendered.
How can I forward urls that are not listed to a NotFound component ?
just add <Route component={NoMatch} /> :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
<Route component={NotFound} />
</Switch>
</section>
</Fragment>
</Router>
see react router handling 404 pages
Add a new route like this as the very last route:
<Route path='/' component={my404Component} />
Notice it does not have exact. Anything that hasn't been matched will match with it and send them to the 404.
I use React Router in my React application.
In Header component that isn't inside Router component i want to redirect user after register a form, but because Header component is outside of Router component i can't use this.props.history.push('/');.
How can i redirect user in Header component?
This is my App component:
<div>
<Header order={this.order}/>
<Router data={this.state.data}>
<div>
<Menu data={this.state.data}/>
<Route exact path="/" component={Home} />
<Route exact path="/post" component={PostList} />
<Route path="/showpost/:slug" component={ShowPost} />
<Route path="/page/:slug" component={ShowPage} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forgotpassword" component={Forgot} />
<Route path="/password/reset/:token" component={Reset} />
<Route path="/logout" component={Logout} />
<Route path="/user" component={User} />
<Route path="/saveorder" render={()=><SaveOrder data={this.state.data}/>} />
</div>
</Router>
<Map />
<Footer />
</div>
You can use this.props.history.push('/') if your Header component is passed to the withRouter HOC.
withRouter allows you to get history in component props.
So... in Header component you should import withRouter HOC
import { withRouter } from 'react-router-dom';
and export your Header component like this:
export default withRouter(Header);
You can find more info about programmatic navigation here https://tylermcginnis.com/react-router-programmatically-navigate/
an example of what you want to do is found at the end of the post :)
move Header inside Router, only the component that are inside <Router> that can use any of react-router's apis.
the code would look like this:
<div>
<Router data={this.state.data}>
<div>
<Header order={this.order} />
<Menu data={this.state.data} />
<Route exact path="/" component={Home} />
<Route exact path="/post" component={PostList} />
<Route path="/showpost/:slug" component={ShowPost} />
<Route path="/page/:slug" component={ShowPage} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forgotpassword" component={Forgot} />
<Route path="/password/reset/:token" component={Reset} />
<Route path="/logout" component={Logout} />
<Route path="/user" component={User} />
<Route
path="/saveorder"
render={() => <SaveOrder data={this.state.data} />}
/>
</div>
</Router>
<Map />
<Footer />
</div>
This question already has answers here:
Route is not matched
(3 answers)
Closed 5 years ago.
I'm not sure why everything is redirecting to a blank page:
I'm using:
"react-router": "^4.2.0",
"react-router-dom": "^4.1.1",
App.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';
class Container extends Component{
render() {
return (
<div>{this.props.children}</div>
);
}
}
export default class App extends Component {
render() {
return (
<BrowserRouter onUpdate={onUpdate}>
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>
</BrowserRouter>
);
}
}
Homepage route to '/' is working fine.
What's not working are all the other routes.
For example when a user clicks a hyperlink that redirects to these routes or other routes other than the default route, I'm getting a blank page:
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
Here is how my routes were working when I was using react-router v3:
<Router history={browserHistory} onUpdate={onUpdate}>
<Route path="/">
<IndexRoute component={HomePageContainer} />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={About} name="about" path="about" />
<Route component={JobList} name="jobs" path="jobs" />
</Route>
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Router>
Note that I also added the new route for companydetail just recently.
All your paths needs to be with respect to to base path i.e. /
Change your router config to
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="/interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="/interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>
Try wrapping your router in an anonymous function.
const App = () => (
<BrowserRouter onUpdate={onUpdate}>
<Switch>
<Route component={HomePageContainer} exact path="/" />
<Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
<Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
<Route component={Container} path="/" />
<Route component={NotFound} path="*" />
</Switch>
</BrowserRouter>
)