I have tried to learn React and now wanted make a Route but it seems like it doesnt render Overview.
Iam thankful for any help.
import Sidebar from "./components/Sidebar";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Overview from "./pages/Overview";
function App() {
return (
<Router>
<Sidebar />
<Switch>
<Route path="/overview" components={Overview} />
</Switch>
</Router>
);
}
export default App;
import React from 'react';
const Overview = () => {
return (
<>
<div>Please Render!!</div>
</>
)
};
export default Overview;
The Route accepts component as param and not components. See here
Your code should be -
import Sidebar from "./components/Sidebar";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Overview from "./pages/Overview";
function App() {
return (
<Router>
<Sidebar />
<Switch>
<Route path="/overview" component={Overview} />
</Switch>
</Router>
);
}
export default App;
You have type error, you write components instead of component.
Change this
<Route path="/overview" components={Overview} />
to this
<Route path="/overview" component={Overview} />
Add exact attribute as following:
<Route path="/overview" exact components={Overview} />
You must switch components to component. Just take out the s.
Related
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>
);
}
I am trying to build a simple meetup application using React.The folder structure is as below:
Inside AllMeetups.js:
function AllMeetupspage(){
return <div>AllMeetups</div>
}
export default AllMeetupspage;
Inside Favourites.js:
function Favouritespage(){
return <div>favourites</div>
}
export default Favouritespage;
Inside Newmeetup.js,
function NewmeetupPage(){
return <div>Newmeetup</div>
}
export default NewmeetupPage;
Inside App.js,
import { Route } from 'react-router-dom';
import AllMeetupspage from './pages/AllMeetups';
import NewmeetupPage from './pages/Newmeetup';
function App() {
return (
<div>
<Route path='/'>
<AllMeetupspage />
</Route>
<Route path='/new-meetup'>
<NewmeetupPage />
</Route>
</div>
);
}
export default App;
Inside index.js,
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
I want to see the Allmeetups page content when I load browser.But when I load the browser,it displays nothing.I am new to react and javascript.Could anyone please let me know where I go wrong?
If you're using react-router #v6, you need to replace component with element
<Route path="/" element={<AllMeetupspage />} />
...
...
you have to wrap your routes with the BrowserRouter ( in the below image used as Router) from the react-router-dom for the routing to work. I think this is the issue in your code, sorry if am wrong.
Eg:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
const App = () => {
return (
<>
<Router>
<Switch>
<Route path="/" component={HomePage} />
</Switch>
</Router>
</>
);
};
export default App;
If you are using react-router version#5 or lower you need to do
<Route exact path="/new-meetup" />
because both routes start with the "/" and would always fall back to the first as you don't specify that you want the complete URL match. The exact parameter basically is some kind of regex that says should match the complete url. From the old docs: https://v5.reactrouter.com/web/api/Route/exact-bool
With the version#6 its not necessary anymore as react-router by default will always look for the exact path.
I'm trying to make a news-feed website with React.js.
How to make a Router with the news ID?
I'm trying something like this:
<Route path="/news/:id">
{ ( {id} ) => <NewsPiece newsID={id}/> }
</Route>
But it didn't work out. I tried to look it up but didn't find any way convenience.
Below is my App.js being the main file.
import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
function App() {
return (
<React.Fragment>
<NavBar/>
<Router>
<Switch>
<Route path="/news/:id">
{ ( {id} ) => <NewsPiece newsID={id}/> }
</Route>
<Route path="/news">
<Topics/>
</Route>
<Route path="/">
<Container/>
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
export default App;
You should simply create a route like this -
App.js -
...
<Switch>
<Route path="/news/:id">
<NewsPiece />
</Route>
<Switch>
...
Now go to your component and access route parameter like this.
components/NewsPiece(assuming it's functional component) -
import { useParams } from 'react-router-dom';
function NewPiece = () => {
....
const { id } = useParams(); // you'll get the id present in URL route parameter
....
}
export default NewPiece;
Explanation - react-router-dom provides a hook useParams which extracts all the route parameters present and gives us in an object with key-value pair.
Since you're already getting id from a route parameter you don't need to use extra props newsID for this.
Try this
import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
function App() {
return (
<React.Fragment>
<NavBar/>
<Router>
<Switch>
<Route path="/news/:id">
<NewsPiece newsID={id}/>
</Route>
<Route path="/news">
<Topics/>
</Route>
<Route path="/">
<Container/>
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
export default App;
If the error still happens comment the error msg
That's not the correct way to get the route params.
Your route should just be like this.
<Route path="/news/:id">
<NewsPiece/>
</Route>
You will get the value of your param inside the NewsPiece component using props.match.params.id
Here id is the param name you are using.
Try this then
import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
function App() {
return (
<React.Fragment>
<NavBar/>
<Router>
<Switch>
<Route
path="/news/:id"
component = {NewsPiece newsID={id}}
</Route>
<Route path="/news">
<Topics/>
</Route>
<Route path="/">
<Container/>
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
export default App;
If the error still continues . Its a problem with your importing method...
I want to link from one React page to another on a static site, but my routes keep linking to /#/info which doesn't seem to do anything.
my index.js file:
ReactDOM.render(<App />, document.getElementById('root'));
My App.js file:
import React from 'react'
import { HashRouter, Switch, Route, Link } from 'react-router-dom'
import Stream from './Stream.js'
import Info from './Info.js'
function App() {
return (
<HashRouter>
<Switch>
<Route exact path='/' component='Stream' />
<Route path='/info' component='Info' />
</Switch>
<Link to='/info'>Info</Link>
<Stream />
</HashRouter>
);
}
export default App;
My Stream.js:
import React from 'react'
function Stream() {
return (
<div>Stream</div>
);
}
export default Stream;
My Info.js:
import React from 'react'
import { Switch, Route } from 'react-router-dom'
function Info() {
return (
<h1>Info</h1>
);
}
export default Info;
According to this the url being rewritten as /#/info is expected behavior, but my content is not loading when the link is clicked. I want <Stream /> to go away and for the contents of <Info /> to take its place.
Your code works fine if you pass in the actual components rather than their names as strings:
<Switch>
<Route exact path="/" component={Stream} />
<Route path="/info" component={Info} />
</Switch>
try using BrowserRouter
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path='/' component='Stream' />
<Route path='/info' component='Info' />
</Switch>
<Link to='/info'>Info</Link>
<Stream />
</BrowserRouter>
);
}
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