I have the below router settings for my application. In App.js below code are present.
<Switch>
<Route exact path="/" component={SignIn} />
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
<Route exact path="/signin" component={SignIn} />
</Switch>
Under About component I have another sub division so i kept the routing separately for component which are coming under "About". In About(/about) component
class About extends Component {
render() {
return (
<div>
<h3>From AboutUs page</h3>
<Switch>
<Route exact path='/about' component={AboutIndex}/>
<Route path='/about/details' component={Aboutdetails}/>
</Switch>
</div>
);
}
}
When i click the 'AboutDetails" link it routing to the address "/about/details". Then when i try to click home page link as "/" or "/home" component or "/signin" component. It take me the address as "/about/" or "/about/home" or "/about/signin". In the address bar it is not loading the proper routing url insteadof that it always prefix "/about" component. This issue only when i click the component which are inside about components. But not for the "/about" component. Please help me how to resolve this issue.
Find the below header code where the link are declared.
<Nav>
<LinkContainer to="/home" activeClassName="active">
<NavItem eventKey={1}>Home</NavItem>
</LinkContainer>
<LinkContainer to="/about" activeClassName="active">
<NavItem eventKey={2}>About</NavItem>
</LinkContainer>
<LinkContainer to="/signin" activeClassName="active">
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<LinkContainer to="/home" activeClassName="active">
<MenuItem eventKey={3.1}>Home</MenuItem>
</LinkContainer>
<LinkContainer to="/about" activeClassName="active">
<MenuItem eventKey={3.2}>AboutUs action</MenuItem>
</LinkContainer>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</LinkContainer>
</Nav>
Related
I am new user of react i am trying to link pages but with bootstrap navigation but its not working.
I am tring to use the react router dom to make different pages so that it can go to different pages on click but the app does not compile since browser router is not being imported. I just copy pasted it straight from the website. Can someone tell me where the mistake is and how to fix it
It shows nothing on browser but a blank page![enter image description here] (https://i.stack.imgur.com/lf4Sz.png) here is the picture that shows some errors in console but not on browser
app,js
import Home from './Components/Home'
- import Contact from './Components/Contact'
- import About from './Components/About'
- import { BrowserRouter,
- Routes,Route } from 'react-router-dom'
- <BrowserRouter>
- <Routes>
- <Route path="/" element={<Home />}>
- <Route path="/About" element={<About />} />
- <Route path="/ContactUs" element={<Contact />} />
- </Route>
- </Routes>
- </BrowserRouter>
-
- navbar.js
- <Navbar expand="lg" >
- <Container>
- <Navbar.Toggle aria-controls="basic-navbar-nav" />
- <Navbar.Collapse id="basic-navbar-nav">
- <Nav className="me-auto">
- <LinkContainer to='/'>
- <Nav.Link >HOME</Nav.Link></LinkContainer>
- <LinkContainer><Nav.Link to="/About">ABOUT</Nav.Link></LinkContainer>
- <LinkContainer><Nav.Link to="/services">SERVICES</Nav.Link></LinkContainer>
- <LinkContainer> <Nav.Link to="/">WRITE</Nav.Link></LinkContainer>
-
- </Nav>
- </Navbar.Collapse>
- </Container>
- </Navbar>`
you need to nest your Navbar inside the BrowseerRouter tag.
Example:
<Header/>
<BrowserRouter>
<NavigationBar />
<Routes>
<Route path={"/"}></Route>
<Route path={"/example"}></Route>
</Routes>
</BrowserRouter>
**app.jsx is the main file handling all routes.**
<Switch>
<Route exact path="/" component={Home} />
<Route path="/entry-rules" component={EntryRules} />
<Route path="/entry-form" component={EntryForm} />
<Route path="/payment" component={Payment} />
<Route component={Error404} />
</Switch>
```
**Home route is working fine when I click others component is not working.**
**I have used react-router-dom version 5.2.0**
```
<li className="nav-item">
<Link to="/" className="nav-link active" aria-current="page">
Home
</Link>
</li>
<li className="nav-item">
<Link to="/entry-rules" className="nav-link">
Entry Rules
</Link>
</li>
<li className="nav-item">
<Link to="/entry-form" className="nav-link">
Entry Form
</Link>
</li>
```
Home route is working fine when I click others component is not working.
app.jsx is the main file handling all routes.
I have used react-router-dom version 5.2.0
Welcome to SO! I see you are using exact for the Home route but not for others. React Router Dom needs to be told that the path is exact, so you should do something like this:
<Switch>
<Route exact path="/" component={Home} />
<Route path="/entry-rules" exact component={EntryRules} />
<Route path="/entry-rorm" exact component={EntryForm} />
<Route path="/payment" exact component={Payment} />
<Route component={Error404} path="*" />
</Switch>
Notice how has '*' and no exact props. Since we want to Error404 component if RRD can't find anything from above.
Once again welcome to SO, try to structure your question nicely and upvote answers that are helpful.
There is typo in one of the Route. path should be "/entry-form"
<Route path="/entry-rorm" component={EntryForm} />
<Link to="/entry-form" className="nav-link">
For other routes it should be working with your code. If not, try moving Home page route below all routes inside <Switch> component
I'm using react routing for my site but on IPFS it doesn't work it's looking for a path that doesn't exist
<Nav className="">
<Nav.Link className="custom-link" to="/home" eventKey="1" href="/home">Home</Nav.Link>
<Nav.Link to="/dex" eventKey="2" href="/dex">DEX</Nav.Link>
<Nav.Link to="/defi" eventKey="3" >DEFI</Nav.Link>
<Nav.Link to="/nft" eventKey="3" >NFT</Nav.Link>
</Nav>
The Route
import {BrowserRouter,Route, Switch} from 'react-router-dom'
<BrowserRouter>
<Switch className ="switch">
<Route path="/" component={Home} exact />
<Route path="/home" component={Home} />
<Route path="/dex" component={Dex} />
</Switch>
</BrowserRouter>
Once deployed on IPFS if I click on a link I get;
ipfs resolve -r /ipfs/bafybeifwqscmvkuffygd7tqioy6fusuh3q7y4xlq7d7bfhkbkrsftcruoy/dex: no link named "dex" under bafybeifwqscmvkuffygd7tqioy6fusuh3q7y4xlq7d7bfhkbkrsftcruoy
How can I get my route to work on IPFS?
You'll have to use HashRouter instead of BrowserRouter:
https://reactrouter.com/web/api/HashRouter
How do I pass middleware to my router when using react router 4?
I'm sure I'm missing something obvious. Thanks!
Pretty standard react redux react-router set-up:
export default (
<Provider store={store}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home} /> {/* index route */}
<Route path="/question/" component={Question} />
</div>
</BrowserRouter>
</Provider>
);
I'd like to render some routes with a nav at the top, while rendering other routes (like a sign-up / sign-in page) without any nav.
For the setup with the nav, I have:
const App = () => (
<Router>
<div>
<Nav />
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
I'm trying to find the best way of handling this with React Router (seems like it would have to handled with some type of conditional maybe? - "if my current route matches any one of these routes, then render like so else render this.").
Thanks!
You have at least two possibilities:
Use Route "path" property to test the route and render the component. Path property accepts path.to.regexp expressions.
Wrap your component with withRouter method and inside Nav test if the route matches and render null otherwise.
First answer:
const App = () => (
<Router>
<div>
<Route path="/(?!signin|signup)" component={Nav}/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
Second answer:
import { withRouter } from 'react-router'
const NavWithRouter = withRouter(Nav);
const App = () => (
<Router>
<div>
<NavWithRouter/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
<Route
path={`foo/(A|B|C)`}
component={() => (<Baz {...props}/>)}
/>
Where A,B,C are the different routes like foo/A.
I usually use two different Layout pages. And within the Layout pages, have a router for the content.
My code will look like this:
<Router>
<Route path="/login" component={AuthLayout} />
<Route path="/logout" component={AuthLayout} />
<Route path="/some/path" component={Layout} />
</Router>
Within each Layout, there will be the usual header / footer / navbars and then another set of routes.
<div className="auth-layout">
<header className="auth-layout__header"></header>
<main className="auth-layout__content">
<Switch>
<Route path="/login" component={Login} />
<Route path="/logout" component={Logout} />
</Switch>
</main>
</div>
In this way, I have a direct mapping from requirements to code. In my code, there are much more differences between the two layouts.
Just use a prop for this & inside the children your are able to conditional render the nav.
<Route exact path="/" render={() => <Home hasNav={false} />}