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
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
Asking here as I cannot find a definitive answer online..... Should my reactjs routes look like this
import './App.css'; import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Test from './components/Test';
import Test1 from './components/Test1';
class App extends Component {
render() { return
(
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/home" component={Home} />
<Route exact path="/test" component={Test} />
<Route exact path="/test1" component={Test1} />
<Route component={NoMatch} /> </Switch>
</div>
</Router>
);
}
}
export default App;
Or should it include index.html like this
<Route exact path="/test/index.html component={Test} />
The reason I ask is when I refresh the page on any path other than root I get a 404 page cannot be found
Im using react-router-redux#5.0.0
I have this
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
Is there a way to define default route as in react-router-redux#4.x.x?
It is also necessary this "default route" does not pass if any other matched.
Because if I will add
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
Default component will be rendered for all routes, including '/login' and '/'
I was looking for answer for the same problem but for react-router-dom package. The solution was this:
<Switch>
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
</Switch>
This way the first Route that matches will be displayed while the rest ignored.
You can import Switch together with Route like this:
import { BrowserRouter, Switch, Route } from 'react-router-dom';
Place the following catch-all route after all other routes are defined (optionally leave the path out as stated below):
<Route path="*" component={DefaultRoute} />
Here's a link to an answer with more details: React-Router: No Not Found Route?
With latest react-router version,
<Route path='' Componenet={Default}>
should be changed to,
<Route path='' element={<Default>}>
When a user clicks a link it will guide the user to a checkout page.
selectSlot(slot){
window.location = `/checkout/${slot.target.value}`
}
My approach won't keep the redux store values.
How can I keep those values?
Here are the router definitions
<Provider store={store}>
<ConnectedRouter history={history}>
<Router>
<Switch>
<Route exact path="/" component={MainLayout} />
<Route exact path="/index.html" component={MainLayout} />
<Route path="/checkout" component={CheckoutLayout} />
<Route component={NotFound}/>
</Switch>
</Router>
</ConnectedRouter>
</Provider>
I am using Link from react-router-dom for the purpose and works for me. You can read about it here