I testing my React App and I have an error of all Link react router dom in my views.
Index.js
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
function App({props}) {
return (
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Homepage} appProps={props}/>
<Route path="/accueil" exact component={Homepage} appProps={props}/>
<Route component={Error} />
</Switch>
<Footer />
</div>
);
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("fatboar")
);
Homepage.js
import { Link } from 'react-router-dom';
export default function Homepage(props) {
return (
<Link to="/ajouter-ticket" className="primary-btn mt-5">Je participe</Link>
)
}
How my Link is outside of my router ?
The Link is navigate to /ajouter-ticket and as I see from your code you never put a Route to this Link due to this you navigate to the Error Component
and if you read the react-router-dom doc
you will see that when you navigate to something that doesn't define in the Switch Route go to the Route Without a path
React Router Dom Doc
<Route path="/ajouter-ticket" exact component={SomeComponent} appProps={props}/>
also, why do you have to routes to the HomePage?
Related
I am trying to implement a dynamic route from my app.js.
I have 2 pages. HomePage.js and ReportPageLayout.js.
When I try to navigate from HomePage to ReportPage, I am getting a status= cancelled.
Image of Network tab
When i refresh the page in the browser, the data is fetched and rendered.Image status=200 and component rendered on dom
Here is my app.js file
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/:id" component={ReportPage} />
</Switch>
</Router>
</div>
);
}
Please help. Thank you in advance.
As far as I know (not that much), in router-dom v5 you should nest the target component and not as an argument
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<Fragment>
<Switch>
<Route exact path="/">
<Homepage/>
</Route>
<Route path="/:id">
<ReportPage/>
</Route>
</Switch>
</Fragment>
);
}
Furthermore, if you use suspense or importing data from, you should always create a fallback.
I had the same thing here
Delay in loading the array crushs the app
im currently learning react. During course about routing i get this error Screenshoot I' ve been making sure that i' ve write code right and trying my best to find solution for around 3 hours now and i cant solve this for my own so i am seeking for help.
import React from "react";
import "./index.css";
import { BrowserRouter, Route } from 'react-router-dom';
import TwittersView from '../TwittersView/TwittersView';
import ArticlesView from '../ArticlesView/ArticlesView';
import NotesView from '../NotesView/NotesView';
render() {
return (
<BrowserRouter>
<>
<h1>hello world</h1>
<Route exact path="/" component={TwittersView} />
<Route path="/articles" component={ArticlesView} />
<Route path="/notes" component={NotesView} />
</>
</BrowserRouter>
);
}
}
export default Root;
You need to wrap your <Route> component with <Routes> component.
And react-router-dom v5 and v6 has different syntax to render routes.
Here is the example with react-router-dom v6.
import React from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
const TwittersView = () => {
return <h1>Twitter view</h1>;
};
const ArticlesView = () => {
return <h1>Articles view</h1>;
};
const NotesView = () => {
return <h1>Notes view</h1>;
};
const App = () => {
return (
<BrowserRouter>
<Link to="/">TwittersView</Link>
<Link to="/articles">ArticlesView</Link>
<Link to="/notes">NotesView</Link>
<Routes>
<Route path="/" element={<TwittersView />} />
<Route path="/articles" element={<ArticlesView />} />
<Route path="/notes" element={<NotesView />} />
</Routes>
</BrowserRouter>
);
};
export default App;
the component is no longer in accord with the latest versions of react also I think Switch is not working now Routes has been replaced don't know why this doesn't reflect latest documentation.
import { BrowserRouter, Route, Routes } from 'react-router-dom';
.
.
.
<BrowserRouter>
//Navlink handeling here ie Navbar component with custom css
<Routes>
<Route path='/' element={<ElementName />}/>
<Route path='/aboutus' element={<ElementName />}/>
</Routes>
</BrowserRouter>
In one of my modules I use this code without any issue:
import { Link } from "react-router-dom";
<Link to="/HowItWorks">
Continue
</Link>
But in another module I use similar code but get the invarient failed message
import { Link } from "react-router-dom";
<Link to="/TheBook">Continue</Link>
The only difference is that the first module is in the src/components directory while the failing module is in the src directory.
In App.js (which is also in src directory) the router code includes several modules including both of the ones above:
import {
Switch,
BrowserRouter as Router,
Route,
Redirect,
} from 'react-router-dom';
import Nav from './Nav';
import Introduction from './components/Introduction.js';
import HowItWorks from './components/HowItWorks.js';
import Blog from './components/Blog.js';
import Shop from './components/Shop.js';
import TheBook from './components/TheBook.js';
import Footer from './Footer.js';
function App() {
return (
<>
<div className="App">
<Router>
<Nav />
<Switch>
<Route path="/Introduction" exact component={Introduction}></Route>
<Route path='/HowItWorks' exact component={HowItWorks}></Route>
<Route path="/Shop" exact component={Shop}></Route>
<Route path="/Blog" exact component={Blog}></Route>
<Route path="/TheBook" exact component={TheBook}></Route>
</Switch>
</Router>
<Footer />
</div>
</>
);
}
export default App;
If I click the link for "TheBook" in the navbar it works fine... Any idea why is this happening ?
Ok, the problem was, as I expected, not in the footer.js code but in the App.js code. The footer.js code needed to be moved inside the Router:
function App() {
return (
<>
<div className="App">
<Router>
<Footer /> {/* The footer must be inside the router for the <link> to work */}
<Nav />
<Switch>
<Route path="/Introduction" exact component={Introduction}></Route>
<Route path='/HowItWorks' exact component={HowItWorks}></Route>
<Route path="/Shop" exact component={Shop}></Route>
<Route path="/Blog" exact component={Blog}></Route>
<Route path="/TheBook" exact component={TheBook}></Route>
</Switch>
</Router>
</div>
</>
);
}
This is now working properly.
I'm starting in React and I'm curious about about if have any way to change a page without reload all the html, changing only a content component for example.
I know that there is a way to change the component without change the url but I thought that if the url change too the application would be better.
React Router is the exact thing you're looking for
Here, how you can achieve what you're looking for.
First, wrap your app with BrowserRouter
import { BrowserRouter } from "react-router-dom";
import React from 'react';
class App extends React.Component {
return (){
return (
<BrowserRouter>
<SomeComponent />
</BrowserRouter>
)
}
}
Now just use the Route and Link. Route told the application which component to render on the basis of the current route and Link changes the URL without reloading the whole page
import { Route, Link, Switch } from "react-router-dom";
import React from 'react';
import {Circle, Square} from './someFileWithComponents';
class SomeComponent extends React.Component {
render(){
return (
<div>
<Link to='/circle' >Circle</Link>
<Link to='/square' >Square</Link>
<Switch>
<Route path='/circle' component={Circle} />
<Route path='/square' component={Square} />
</Switch>
</div>
)
}
}
React Router is what you looking for
const AppRouter =()=>(
<BrowserRouter>
<div>
<Header/>//where Header components contains the navigation
<Switch>
<Route path="/" component={BookListPage} exact={true} />
<Route path="/create" component={AddBookItem} />
<Route path="/edit/:id" component={EditBookItem} />
<Route path="/help" component={HelpPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
I have navigation in react and want to redirect to the listing page on click.using this right now which is loading the page
This is my Header.js file
return (
<Link to="/allusers">All Users</Link>
);
This is my App.js file
I imported this
import UsersList from './user/UsersList'; //then i defined
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/userlist' component={UsersList} />
</Switch>
</div>
</BrowserRouter>
)
}
}
You can check react-router or #reach/router
For example, in #reach/router, you can use the provided Link component to create the same anchor as in your example:
<Link to="/userlist">All Users</Link>
And create a router with all your routes:
<Router primary={false}>
<Home path="/" />
<AllUsers path="/allusers" />
<NotFound default />
</Router>
https://github.com/reach/router
You can play around with this example: https://reach.tech/router/tutorial/04-router
Same thing can be done with react-router.
This achieved through a client side routing: manipulation of the history object of the browser through client side
This is an example rendering a specific component for specific route
import { BrowserRouter, Route, Link, Switch } from "react-router-dom"
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/allusers" component={AllUsers} />
<Route component={NotFoundPage} />
</Switch>
</BrowserRouter>
// then just pair it up with a navigation bar
<Link to="/">All Users</Link>
<Link to="/allusers">All Users</Link>
These components tied up to a route has access to history object as prop where you can call history.push('/allusers') for other use cases
reference:
https://reacttraining.com/react-router/web/guides/quick-start
You can do that as follows:
goToUserList = () => {
this.props.history.push('/userlist')
}
...
return(
<button onClick={this.goToUserList}>Go User List</button>
)
Hope it helps.