React routing

npm install react-router-dom

Source: reacttraining.com

React router

npm install react-router-dom

React router

//React Router 6
import Home from './Home';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Create from './Create';
import BlogDetails from './BlogDetails';
import NotFound from './NotFound';
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/create" element={<Create />} />
            <Route path="/blogs/:id" element={<BlogDetails />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

React router

// npm install react-router-dom
// yarn add react-router-domimport { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";

Routing in react

npm install react-router-dom
to install the react router to create a specific urls in react

Source: reactrouter.com

React router

import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
const routing = (
  <Router>
    <React.StrictMode>
      <Header />
      <Switch>
        <Route exact path="/" component={Register} />
        <Route exact path="/Login" component={Login} />
        <Route exact path="/Home" component={App} />
        <Route path="/Logout" component={Logout} />
        <Route path="/CreatePost" component={CreatePost} />
        <Route path="/CreateComment" component={CreateComment} />
        <Route path="/UserProfile" component={UserProfile} />
        <Route path="/SearchProfile" component={SearchedProfile} />
        <Route path="/follow" component={FollowDisplay} />
        <Route path="/following" component={FollowingDisplay} />
      </Switch>
      <Footer />
    </React.StrictMode>
  </Router>
);

Similar codes

0 vote256 views1 answer
Node closes once you open app react-native
Javascript React
6 votes224 views1 answer
How to import dotenv in react
Javascript React
0 vote280 views1 answer
What is the difference between throttling and debounce and raf throttling in react
Javascript React
0 vote217 views1 answer
Ngif react
Javascript React
1 vote278 views1 answer
React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
Javascript React
0 vote221 views1 answer
Float right react native
Javascript React
1 vote298 views2 answers
React native time range picker
Javascript React
1 vote171 views2 answers
How to not use relative imports in react js
Javascript React
11 votes232 views3 answers
Reactjs get url query params as object
Javascript React
140 votes805 views3 answers
React.js installation
Javascript React