I am very new to react and and the router and bootstrap libraries I chose to use. They are basically just react-router-bootstrap. I am just getting a feel for things and I want to make a web app that has some basic url navigation. I have 4 parts, home browse add and about, clicking on the links works well, and so do the routes, but when navigate to the default route the handler works okay in that it shows the Home component, but does not make the home button active in the nav. I am a bit stuck and wondering if anyone can help me out? I would like to make that home part active at the '/ ' default route, and was thinking I could just redirect to '/home' and let the rest take care of it, however it doesn't look like I can add a path prop to DefaultRoute. So I was curious if anyone had any ides? Also curious if this looks like the right way to build something like I am building.
I made a gist that is HERE
Thanks to all ahead of time!!!
The only change that I made was to your routes, they used to look like this:
var routes = (
<Route handler={App} >
<DefaultRoute handler={Home}/>
<Route name="home" handler={Home} path="/home">
</Route>
<Route name="browse" handler={Browse} path="/browse">
</Route>
<Route name="add" handler={Add} path="/add">
</Route>
<Route name="about" handler={About} path="/about">
</Route>
</Route>
);
and I changed them to this:
var routes = (
<Route handler={App} >
<DefaultRoute name="home" path="/" handler={Home}/>
<Route handler={Home} path="/home">
</Route>
<Route name="browse" handler={Browse} path="/browse">
</Route>
<Route name="add" handler={Add} path="/add">
</Route>
<Route name="about" handler={About} path="/about">
</Route>
</Route>
);
I tested it and it works as expected. When you visit the home page the url only has the /#/ and is not suffixed like /#/home, I don't think that is an issue.
Related
whenever I click on refresh the route is going on the homepage, for all other situations it is working fine. Can someone suggest how to handle this case? I am using react router v5 and routing is done like this
<Route exact path="/home">
<Home />
</Route>
<Route exact path={['/', '/shipments']}>
(
<ShipmentList />
) : (
<PageNotFound />
)}
</Route>
I have the below swtich using react-router. When I open a new tab and go to any path it always redirects to /login. If I remove the bottom switch (with no path - the default), it works as expected. If I navigate to any path having already loaded the react app (i.e. from /login), it works as expected.
Why is the switch not detecting the right path apparently only on first load when the nomatch is included?
Edit: for clarity this is using hashRouter on localhost, react-router-dom v5.2
<Switch>
<div className="loginForm align-middle">
<img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/>
<Route path="/verify">
<Verify/>
</Route>
<Route path="/reVerify">
<ReVerify/>
</Route>
<Route path="/register">
<Register/>
</Route>
<Route path="/forgotPassword">
<ForgotPassword/>
</Route>
<Route path="/resetPassword">
<Verify type={"password"}/>
</Route>
<Route path="/login">
<Login/>
</Route>
<Route> //same result using path="*"
//no match - default to login
<Redirect to="/login"/>
</Route>
</div>
</Switch>
Similar topics don't seem to apply to this scenario - either refer to not matching at all (mine does once loaded) or are from much older (2015) versions.
It's important to note that the current version of react-router-dom v6 doesn't support the <switch> component instead it uses the <BrowserRouter> which I like to import as <Router>
import {
BrowserRouter as Router,
Route,
Routes,
} from "react-router-dom";
Also, the v6 uses the <element> component to call the component you wish to run on a particular route.
<Router>
<Navbar/>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<AboutPage />} />
<Route path="contact" element={<ContactPage />} />
</Routes>
</Router>
which means you will have to import those components as well.
import Navbar from "./components/NavBar";
import Home from "./pages";
import AboutPage from "./pages/aboutPage";
import ContactPage from "./pages/contactPage";
I've included a Navbar component and placed it outside inside the <Router> but outside the <Routes> in order for the nav to appear on all routes. But that's more of a design choice.
You might also run into a problem where your route will open and page at the same area on the screen where you were when clicked on the route. Let me know if you'll need help with that. You might not need it if you're app is no longer than the full page length
I thought it would be something silly - the containing div should be outside the switch. It now works as expected (I also changed to using component props instead of children, but both seem to work once the div has been moved).
Working code:
<div className="loginForm align-middle">
<img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/>
<Switch>
<Route path="/verify" component={Verify}/>
<Route path="/reVerify" component={ReVerify}/>
<Route path="/register" component={Register}/>
<Route path="/forgotPassword" component={ForgotPassword}/>
<Route path="/resetPassword" render={() => Verify("password")}/>
<Route path="/login" component={Login}/>
<Redirect to="/login"/>
</Switch>
</div>
Note that now all direct children of Switch are now only Route
Edit tweaked based on advice of Drew Reese
I'm using React Router v5.2 in my project. Browser Router looks like this:
<BrowserRouter>
<Navbar />
<Switch>
<Route path={"/sitemap", "/sitemap/:param?"} exact>
<Sitemap />
</Route>
<Route path={"/", "/:param?"} exact>
<Home />
</Route>
<Route path="/" render={() => <div>404</div>} />
</Switch>
<Footer />
</BrowserRouter>
The Link to navigate:
<Link to="/sitemap">Sitemap</Link>
Clicking the link obviously overwrites the param if my URL is like "mysite.com/param" this and turns it into "mysite.com/sitemap". But my question is, how would I make it "mysite.com/sitemap/param" from the link? I tried adding the history.location.pathname when adding the link, but it would look like "mysite.com/sitemap/sitemap/param" if I press it again...
And when clicking on the home button it should only show again "mysite.com/param".
Any help would be greatly appreciated!
You can use useParams() to save params and pass it to other link.
Please refer this link to test the URL.
Recently I've tried building a web platform trough React. Everything's fine, everything's work ecc.
But I've run in many problems when I tried to create a different page for the user login:
I already had Routes in my code, so when I tried to add other Routes to another js file they simply didn't work.
I have no clue how to do the authentication in react router, I've tried in many ways, followed many tutorials but nothing worked out.
<Switch>
<Route exact path='/' component={Feed}/>
<Route path="/user" component={Profilo}/>
<Route path='/explore-page' component={ExplorePage} />
<Route path='/events-page' component={EventsPage} />
<Route path='/calendar-page' component={CalendarPage} />
<Route path='/stats-page' component={StatsPage} />
<Route path='/form' component={FormPage}/>
<Route path="/user" component={Profilo}/>
<Route path="/user/:userId" component={Profilo} />
</Switch>
This is all the routes I'm currently using inside a div to get the react component rendered.
As I said before adding other routes in an upper file wouldn't give me a response.
So, in the end, I'm gonna ask you where should I put the route for the login and the home? In there or I should just moving everything?
Thank you in advance.
One simple way is adding the logic to handle authentication in your render function.
If the user is not authenticated. Redirect to the login page. Otherwise, go to your component
render() {
if (!this.props.isAuth) {
return (
<Switch>
<Route exact path="/" component={Login} />
<Redirect to="/" />
</Switch>
);
}
return (<Switch>
<Route
// your router
/>
</Switch>);
}
I have an applications index page that lists all my applications. The index page is also the default route. I want to nest a 'applications new' modal in the index page. This way I can render the modal while on top of the index page. However, I'm not able to nest within the default route successfully.
Here's how I think it should work
<Route name='applications' path='/applications' handler={Applications}>
<DefaultRoute name="index" handler={ApplicationIndex}>
<Route name='applicationNew' path='/new' handler={ApplicationNewModal}/>
</DefaultRoute>
<Route name="applicationShow" path=':key' handler={ApplicationShow}/>
</Route>
When I try to transition to 'applicationNew' I get an error saying that no route was found with that name
You need to move it to its own Route inside a Route with handler={ApplicationIndex}.
<Route name='applications' path='/applications' handler={Applications}>
<DefaultRoute name="index" handler={ApplicationIndex} />
<Route handler={ApplicationIndex}>
<Route name='applicationNew' path='/new' handler={ApplicationNewModal} />
</Route>
<Route name="applicationShow" path=':key' handler={ApplicationShow}/>
</Route>