React router not working //Even after following the documentation

React router not working //Even after following the documentation - javascript

So i was trying react for first time, i followed the documentation and at router dom i got stuck
When i use Switch is says "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'" So in short my router isn't working and i want a way to make it work, also it is the latest version of react as i just made this project yesterday
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Form from './components/Form';
import Sus from './components/Sus';
import React from "react";
import {
BrowserRouter as Router,
// Switch,
Routes,
Route,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div className="">
<Navbar title="Sus" main="SusHome" about="SusAbout"/>
<div className="container my-5">
<Routes>
<Route path="/" component={Form}/>
<Route path="/sus" component={Sus} />
</Routes>
</div>
</div>
</Router>
);
}
export default App;

To render your components you have to pass like this:
<Route path="/" element={<Form/>}/>
<Route path="/sus" element={<Sus/>} />
The documentation react-router-dom version 6 is this.

Upgrading React Router V5 to V6
If you have ever used React Router you know that we need to wrap our routes into this <Switch> component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes. Something like this
export function App() {
return (
<div>
<Switch>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
)
}
Now with V6 we changed the name from Switch to Routes and now the Routes component has a new prop called element, where you pass the component it needs to render inside this component and be like this
export function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
)
}

Related

Function component on the same page in not picking in route (react-router-dom v6) of react project

I have created a route in my react project using the methods of react-router-dom version 6.2.1.
But when I tried to fetch one route of a functional component written on the same implementation component it is not working.
App.js
import React from 'react';
import './App.css';
import {Routes ,Route} from 'react-router-dom';
import HomePage from './pages/homepage/homepage.component';
const CarsPage= () => {
<div>
<h1>CARS PAGE</h1>
</div>
}
function App() {
return (
<div>
<Routes >
<Route exact path='/' element={<HomePage />} />
<Route exact path='/cars' element={<CarsPage/>} /> // This route is not working.
</Routes>
</div>
);
}
export default App;
Issue
The hats route is not picking up.

Your forgot the return statement in CarsPage
Change it to:
const CarsPage= () => {
return (
<div>
<h1>CARS PAGE</h1>
</div>
)
}

You need to wrap the components in BrowserRouter.
See everything works here: https://codesandbox.io/s/festive-leavitt-7tr1d?file=/src/App.js

Looking at the above implementation, the CarsPage component does not return anything. Refactor it to return your JSX like so.
const CarsPage = () => (
<div>
<h1>CARS PAGE</h1>
</div>
);
Also, import BrowserRouter from "react-router-dom" and wrap the "react-router-dom" component <Routes /> with BrowserRouter as seen in the docs like so
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
...
function App() {
return (
<div>
<Router>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route exact path="/cars" element={<CarsPage />} />
</Routes>
</Router>
</div>
);
}

Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

I am trying to use routing for the first time and followed the exact instructions from Udemy:
File App.js:
import { Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (
<div>
<Route path = "/welcome">
<Welcome />
</Route>
<Route path = "/game">
<Game />
</Route>
<Route path = "/leaderboard">
<Leaderboard />
</Route>
</div>
);
}
export default App;
File index.js
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
I get the following error:
Error: A Route is only ever to be used as the child of
element, never rendered directly. Please wrap your Route in a Routes.
Where have I gone wrong?

Yes, in react-router-dom version 6 it is a bit different. Please look as the sample below.
React Router tutorial
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Routes>
</BrowserRouter>,
rootElement
);

There was a fairly decent change between versions 5 and 6 of react-router-dom. It appears that the Udemy course/tutorial is using version 5 where all you needed was a Router to provide a routing context and Route components just needed to be rendered within this context. In version 6, however, the Route components now need to be rendered within a Routes component (which is an upgrade from the v5 Switch component).
Introducing Routes
One of the most exciting changes in v6 is the powerful new <Routes>
element. This is a pretty significant upgrade from v5's <Switch>
element with some important new features including relative routing
and linking, automatic route ranking, and nested routes and layouts.
The error message is pretty clear, wrap your Route components in a Routes component. The routes also don't take children (other than other Route components in the case of nested routes), they render the components as JSX on the new element prop.
function App() {
return (
<div>
<Routes>
<Route path="/welcome" element={<Welcome />} />
<Route path="/game" element={<Game />} />
<Route path="/leaderboard" element={<Leaderboard />} />
</Routes>
</div>
);
}

The problem is your react-router-dom version.
Probably it's 5.1 or higher.
You can try (in terminal):
npm install react-router-dom#5.3.0
And then your code will be OK. Or you better rebuild your code according to new react-router-dom.

import React from 'react'
import {BrowserRouter, Route, Routes } from 'react-router-dom'
import './App.css';
import Navbar from './components/Navbar';
import { Home } from './components/screens/Home';
import { Login } from './components/screens/Login';
import { Profile } from './components/screens/Profile';
import { Signup } from './components/screens/Signup';
function App() {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/profile" element={<Profile />} />\
</Routes>
</BrowserRouter>
);
}
export default App;

In the latest version of React, 'Switch' is replaced with 'Routes' and 'component' is replaced with 'element'
Enter image description here

Try to wrap your routes by Routes:
import { Route, Routes } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (
<div>
<Routes>
<Route path = "/welcome">
<Welcome />
</Route>
<Route path = "/game">
<Game />
</Route>
<Route path = "/leaderboard">
<Leaderboard />
</Route>
</Routes>
</div>
);
}
export default App;

I think there are many problems that can lead to that issue.
react-router-dom version 6 no longer supports the use of components directly. Use an element to specify the component you route.
Route has to be a child of Routes
Use the simple snippet.
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import Homescreen from './screens/Homescreen';
function App() {
return (
<div className="App">
<Navbar/>
<BrowserRouter>
<Routes>
<Route path='/home' element={<Homescreen/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

The problem right here is that you are using React v5. Since React v6, several changes were included in Router.
So now, to make it work, and as your error message says, you need to wrap your Route element inside a Routes element (Routes now is the equivalent, but an improved version of Switch element). Also, you need to add an "element" prop that accepts JSX instead of wrapping inside the Route element.
So, to make it work, you need to import all these elements like this:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
That being said, your code should look like this:
<Router>
<Routes>
<Route path="/" element={<Welcome/>}>
</Route>
<Route path="/" element={<Game />}>
</Route>
<Route path="/" element={<Leaderboard />}>
</Route>
</Routes>
</Router>

It's probably because you are using version 6 or higher of react-router-dom.
Try:npm i react-router-dom#5.2.0
And it should work.

In the newer version of react-router-dom, we need to nest the Route inside the Routes. Also, component and exact have been removed in newer version.

I was facing same issue and solve it.
Though I am using
react-router-dom#6
So I had to modify app.js and index.js like below
in index.js
import { BrowserRouter } from "react-router-dom";
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
and app.js
import { Routes, Route } from "react-router-dom";
function App() {
return (
<>
<Header />
<main className="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} exact/>
</Routes>
</Container>
</main>
<Footer />
</>
);
}
export default App;
according to official documentation

Now, React uses React Router version 6
For React Router version 6, your index.js file is correct:
File index.js:
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
But your App.js file is not correct for React Router version 6, so this is the correct one below:
I changed three parts as shown below:
File App.js
// 1. "Routes" is imported
import { Routes, Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (
<div> // 2. With "<Routes></Routes>", surround "3 <Route /> tags"
<Routes> // 3. Put an element with a component to each "<Route />"
<Route path = "/welcome" element={<Welcome />} />
<Route path = "/game" element={<Game />} />
<Route path = "/leaderboard" element={<Leaderboard />} />
</Routes>
</div>
);
}
export default App;

Use the element option to set your component instead of nesting it into the route tags. Then wrap all the routes with <Routes></Routes>.
Do not forget to add Routes to your imports
import { Route, Routes } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (
<div>
<Routes>
<Route path = "/welcome" element={<Welcome />}/>
<Route path = "/game" element={<Game />}/>
<Route path = "/leaderboard" element={<Leaderboard />}/>
</Routes>
</div>
);
}
export default App;

Use:
<div>
<Header />
</div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>

I know I'm late but there is another way to do nested routes straight from javascript.
first import
import { useRoutes } from "react-router-dom";
secondly, declare your routes. Here is a quick example
function App() {
return useRoutes([
{
path: "/",
element: <Example/>
},
{
path: "/contact",
element: <Example/>
}]);
}
so now you can have unlimited nested components doing it this way.

in your index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")); //where App must rendered in real DOM?in root
root.render(<App />); //jsx code is a special syntax that browser not undrestand it!
and in your App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupPage />} />
<Route path="/favorites" element={<FavoritesPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

There is another way to fix the version issues:
App.js File:
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (<div>
<BrowserRouter>
<Routes>
<Route path = "/Welcome" element={< Welcome/>}/>
<Route path = "/Game" element={< Game/>}/>
<Route path = "/LeaderBoard" element={< LeaderBoard/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

React js: React router not redirecting when button is being clicked

I have been trying to solve this problem for couple days and still couldnt get it to work. How does redirecting not work here? I keep getting the "TypeError: history is undefined". Also when the button is being clicked, it stays at the same url. What am I doing wrong?
import React from 'react';
import Nav from './Nav';
import About from './About';
import Service from './Service';
import Home from './Home';
import {
BrowserRouter as Router,
Switch,
Route,
useHistory,
} from 'react-router-dom';
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push('/about');
}
return (
<div className='App'>
<button onClick={handleSub}>submit</button>
<Router>
<Nav />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</Router>
</div>
);
}
export default App;
Edit: implemented the answers and still having trouble.
Suggestion 1: place the button inside the router: url switches for links or button is clicked but pages for the links not when the button is clicked.
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push(`/about`);
}
return (
<Router>
<div className='App'>
<Nav />
<button onClick={handleSub}>submit</button>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</div>
</Router>
);
}
Suggestion number two: url swtich for all the links and button but the page never loads.
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push(`/about`);
}
return (
<Router>
<div className='App'>
<Nav />
<Switch>
<button onClick={handleSub}>submit</button>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</div>
</Router>
);
}

Simply because you are calling useHistory hook outside of React Router Switch Component, meaning you should use this hook in all Switch child components, otherwise the history object is undefined. The best way for my opinion is to move the button to the Home Component, then surly it will work.
I hope this answer helped you.

If you use it like this
<Button color='primary' onClick={handleSub('/about')}>Submit</Button>
and in your method do it like this.
const handleSub = (path) => async (e) => {
history.push(path)}
I hope it will solve your issue.

It's not the placement of the button which is the issue, but as originally mentioned, the placement of useHistory. The history hook is expecting context provided by the Router component - if you are familiar with useContext, it's exactly the same here. You must be calling useHistory inside a component which is a child of Router.
I'll mock an index.js file to demonstrate:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
const rootHtml = (
<Router>
<App />
</Router>
);
ReactDOM.render(rootHtml, document.getElementById('root'));
Remove the original router in the App component. Now this top level router has the App component in scope and can provide it with history context for useHistory to use.

React Router Switch not rendering specific component

I have a React app that is currently using react-router#4.2.0 and I'm struggling with rendering a specific component when the URL changes.
When I try to visit /locations/new it returns with a PropTypes error from the CityList component. I have tried adding in exact to the Route component within LocationsWrapper and then Main config too, however, this then influences other routes - such as /locations to become null.
// BrowserRouter
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";
import Navbar from "./components/Core/Navbar";
import Routes from "./config/routes";
render(
<Provider store={store}>
<BrowserRouter>
<div style={{ backgroundColor: "#FCFCFC" }}>
<Navbar />
<Routes />
</div>
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
// Router config - ( Routes )
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "../components/Home";
import Locations from "../components/Locations";
import CityList from "../components/CityList";
import CreateLocation from "../components/CreateLocation";
import Locale from "../components/Locale/index";
import Profile from "../components/Profile";
import NoMatch from "../components/Core/NoMatch";
import requireAuth from "../components/Core/HOC/Auth";
const LocationsWrapper = () => (
<div>
<Route exact path="/locations" component={Locations} />
<Route path="/locations/new" component={CreateLocation} />
<Route path="/locations/:id" component={CityList} />
</div>
);
const Main = () => (
<main>
<Switch>
<Route exact path="/" component={requireAuth(Home)} />
<Route path="/locations" component={LocationsWrapper} />
<Route path="/locale/:id" component={Locale} />
<Route path="/profile" component={requireAuth(Profile, true)} />
<Route component={NoMatch} />
</Switch>
</main>
);
export default Main;
Am I best avoiding <Switch> entirely and implementing a new method for routes that are undefined - such as 404s?

Yes, this will definitely return first
<Route path="/locations/:id" component={CityList} />
In react-router 4 there is no concept of index route, it will check each and every routes so in your defining routes are same
<Route path="/locations/new" component={CreateLocation} />
<Route path="/locations/:id" component={CityList} />
both path are same '/location/new' and '/location/:id' so /new and /:id are same params.
so at last 'CityList' will return
You can define like this
<Route path="/locations/create/new" component={CreateLocation} />
<Route path="/locations/list/:id" component={CityList} />

Pretty sure your route is not working cause you are also matching params with /locations/new with /locations/:id so then 'new' becomes Id param.
Try changing this
<Route path="/locations/new" component={CreateLocation} />
To something like this
<Route path="/locs/new" component={CreateLocation} />
Just a suggestion hope this may help

React - How to include react router?

I'm new to react and I want to use the router to navigate bet pages/components. I couldn't find too much but was following one tutorial online but I don't think I'm doing it right as I'm only getting errors.
When I import router and then have this line: const { Router, Route ...} = ReactRouter; it gives me errors and I'm not sure how to do it right.
I'm not sure where to put the router path. I always see its being put into ReactDOM:render(...). I only render in my index.js file and it just seems wrong to me to put it there as I feel I should only render the App component (for good practice). Am I wrong?
Thanks a lot!
App.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Router from'react-router'
const { Router, Route, IndexRoute, IndexLink, hashHistory, Link } = ReactRouter;
class App extends React.Component {
render () {
return (
<div>
<button><Link to="/page">Page</Link></button>
Router history={ReactRouter.hashHistory}>
<Route path="/" component={App}>
</Route>
<Route path="/page" component={Page}>
</Route>
</Router>
</div>
);
}
}
export default App;
index.js:
ReactDOM.render(<App/>, document.getElementById('app'));

There has been some changes after React router V4, and you should make sure that the code examples you find are right for the version you are using.
I am using v4, and this is what I do:
App.js:
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
....
....
<BrowserRouter>
<Switch>
<Route path="/settings" component={Settings} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/login" component={Login} />
<Route path="/" component={Login} />
</Switch>
</BrowserRouter>

Develop Reference

JavaScript is the programming language of the Web.

React router not working //Even after following the documentation - javascript

To render your components you have to pass like this: <Route path="/" element={<Form/>}/> <Route path="/sus" element={<Sus/>} /> The documentation react-router-dom version 6 is this.

Related

Function component on the same page in not picking in route (react-router-dom v6) of react project

Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

React js: React router not redirecting when button is being clicked

React Router Switch not rendering specific component

React - How to include react router?

Categories

Resources