I have these routes set up in app.js:
import { BrowserRouter, Route, Switch } from 'react-router-dom';
<BrowserRouter>
<Switch>
<Route name="overview" exact path="/" component={OverviewPage} />
<Route name="details1" exact path="/orders/:orderReference/details1" component={DetailsOnePage}/>
<Route name="details2" exact path="/orders/:orderReference/details2" component={DetailsTwoPage}/>
</Switch>
</BrowserRouter>
These routes are called via buttons in a smart component:
import { Link } from 'react-router-dom';
<IconButton aria-label="Details One">
<Link to="details1" params={{ orderReference: order.orderReference }}>
<PickingIcon />
</Link>
</IconButton>
I would expect this to route to:
http://localhost:3000/orders/my-reference/details1
But it goes to:
http://localhost:3000/details1
Which doesn't exist.
I checked, order.orderReference does indeed contain the value my-reference.
What's wrong with the above code?
In your Link to prop you have to provide the complete order path like
<Link to={`/orders/${order.orderReference}/details1`} >
<PickingIcon />
</Link>
Related
I have this code inside my App.js and i declared those routes:
function App() {
return (
<BrowserRouter>
<div className='App'>
<Switch>
<Route exact path="/"><Index /></Route>
<Route exact path="/contact"><Contact /></Route>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
And then in my Navbar.js i declared this link to /contact:
<Link to={ "/contact" } className="nav-item nav-link">Contact</Link>
And it doesn't work, the url changes into "http://localhost:3000/contact" but it remains in the index page, and the weird thing is that when i type exactly the same url in the url box it takes me to the contact page
Syntax error.
You wrote : Link to={ "/contact" } but it will be like : <Link to="/contact">Contact</Link>
I think It will be solved.
Your code wrong it shold be like that: to="/contact"
Well I would alter the code slightly:
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className='App'>
<Routes>
<Route index element={<Index />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
The link code you have I've altered slightly too:
<Link to="/contact" className="nav-item nav-link">Contact</Link>
That's how we have ours and it is working fine, should be for you too.
I'm working on a react app and I found my page does not render when the url changes. See the code below, I have a navigagtion bar with three Link, when I click them, I can see that the url changes in the address bar, but the page is still staying the one from the old url. However if I refresh the page, then the corresponding page to the current url is rendered and presented.
I saw a similar question but the method in it does not work for me, or maybe I use it in a wrong way? React Router or Link Not Rendered
this is the code from my App.js:
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';
import Home from './booking/Home';
import Login from './auth/Login';
import Register from './auth/Register';
const TopNav = () => (
<div className="nav bg-light d-flex justify-content-between">
<Link className="nav-link" to="/">
Home
</Link>
<Link className="nav-link" to="/login">
Login
</Link>
<Link className="nav-link" to="/register">
Register
</Link>
</div>
);
function App() {
return (
<BrowserRouter>
{TopNav()}
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
</Switch>
</BrowserRouter>
);
}
export default App;
What is your React Router version? If it's React Router v6. You need to change it like this below:
<Route exact path="/" element={<Home />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/register" element={<Register />} />
Because using component is from React Router v5, the newest version using element
Hope it helps!
Could you try to use JSX for your TopNav component?
return (
<BrowserRouter>
<TopNav/>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
</Switch>
</BrowserRouter>
);
}
Also put react in scope for your app at the top
import React from 'react';
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import Register from './Register';
import React from 'react';
const TopNav = () => (
<div className="nav bg-light d-flex justify-content-between">
<Link className="nav-link" to="/">
Home
</Link>
<Link className="nav-link" to="/login">
Login
</Link>
<Link className="nav-link" to="/register">
Register
</Link>
</div>
);
function App() {
return (
<BrowserRouter forceRefresh>
<TopNav />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
</Switch>
</BrowserRouter>
);
}
export default App;
import React from "react";
import Navbar from "./components/Navbar/navbar.component";
import HomePage from "./pages/homePage/HomePage.component";
import Footer from "./components/Footer/footer.component";
import BlogPage from "./pages/blogPage/BlogPage.component";
import { Route, Switch, BrowserRouter } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
</Switch>
<Footer />
</BrowserRouter>
</div>
);
}
export default App;
When I run the app the home component loads without any trouble, but it only loads Navbar and Footer Components, Clearly I am doing something wrong but I haven't been able to figure out what.
the path you are using in Route is the path what you see in the browser url. You dont need dot before the path So,
Replace
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
by this
<Route exact path="/BlogPage" component={BlogPage} />
<Route exact path="/" component={HomePage} />
I am having trouble in changing the page in react with react-router-dom. here is my router :-
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from '../pages/grocery';
import Profile from '../pages/profile';
import CheckoutPage from '../pages/checkout';
export default function Routes(props) {
return (
<BrowserRouter>
<Switch>
<Route path="/" name="Home" component={HomePage} exact />
<Route path="/profile" name="Profile" component={Profile} />
<Route path="/checkout" name="Checkout" component={CheckoutPage} />
</Switch>
</BrowserRouter>
);
}
and here is my Link tag
<Link to="/profile">Profile</Link>
the problem here is that the second Route element, have a "/" too, and the first one will access any element that starts with an "/".
How to fix this?
with Route you can put "exact" just before path, so it will only access that specific route, no matters what comes after that.
example:
<Route exact path="/" name="Home" component={HomePage} />
<Route exact path="/profile" name="Profile" component={Profile} />
<Route exact path="/checkout" name="Checkout" component={CheckoutPage} />
this way you will not have problems accessing your others pages or components.
my name Rajdeep Singh. I'm using react-router-dom in my react project. when clicking on the Link tag, Link tag not work.im don't understand why not working.
in-browser change URL but a component, not change on the web app
check my code
This my Main.js Component file code
import React, { Fragment } from 'react';
import Foot from './Footer';
import Head from './Header'
import MainContect from './MainContect';
import About from './page/About';
import Book from './page/Book'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function Main() {
return (
// use Fragment
<Fragment>
{/* use BrowserRouter as Router */}
<Router>
{/* out Router use Head componet */}
<Head />
{/* use Switch tag */}
<Switch>
{/* use Route defined Router path */}
<Route path="/" exact >
{/* compnent name */}
<MainContect />
</Route>
<Route path="/book" >
<Book />
</Route>
<Route path="/about" >
<About />
</Route>
</Switch>
{/* out Router use Head componet */}
<Foot />
</Router>
</Fragment>
)
}
export default Main
This my Header.js component file code
import React from 'react';
import './css/header.scss';
import { BrowserRouter as Router, Link } from 'react-router-dom';
function Head() {
return (
// Use Router tag wrap all Link in Router
<Router>
<header>
<h1 className='logo'> Sikh Book</h1>
<div className="iconArea">+</div>
<ul className="ulArea">
<li>
{/* Use Link tag for navigation */}
<Link to="/"> Home </Link> </li>
<li>
<Link to="/book">
Book
</Link>
</li>
<li>
<Link to="/about">
About
</Link>
</li>
</ul>
</header>
</Router>
)
}
export default Head
Plz tell whats my mistake
thank for helping me
You should initiate the BrowserRouter only once. I'd do this at a high level of your component tree. You could look at this example.
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
import React from 'react';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
// We give each route either a target `component`, or we can send functions in `render` or `children`
// that return valid nodes. `children` always returns the given node whether there is a match or not.
const App = () => (
<Router>
<div>
<Link to="/">Home</Link>{' '}
<Link to={{pathname: '/about'}}>About</Link>{' '}
<Link to="/contact">Contact</Link>
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route
path="/contact"
render={() => <h1>Contact Us</h1>} />
<Route path="/blog" children={({match}) => (
<li className={match ? 'active' : ''}>
<Link to="/blog">Blog</Link>
</li>)} />
<Route render={() => <h1>Page not found</h1>} />
</Switch>
</div>
</Router>
);
Credits to: siakaramalegos