I was following a react tutorial on routing and how it works in react. I have no idea why this code isnt working as intended. If I understand correctly, It is supposed to render a component which I specify. Any help would be appreciated
ps: this is the exact same code used in the tutorial i was following and was working fine during it
App.js code
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
Link
} from "react-router-dom";
import Main from"./comp/Mainpage";
class App extends Component {
render() {
return (
<Router>
<Routes>
<Route exact path="/" component={Main}/>
</Routes>
</Router>
);
}
};
export default App;
Main page code:
import React from'react';
function Main(){
return (
<div>
<h1>Inside main page</h1>
</div>
);
};
export default Main;
Replace your route from component={Main} to element={<Main />}
<Route exact path="/" element={<Main />} />
I believe its a change in v6 react-router-dom - https://reactrouter.com/docs/en/v6/getting-started/overview
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
I am a beginner in react and i am using routes for basic routing of components on my homepage
This is the code on my homepage component but still it shows nothing on my webpage when I run the server
import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Switch, Route, Link, Redirect, Routes } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Routes>
<Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
<Route exact path='/join' element={ <RoomJoinPage/> }></Route>
<Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
</Routes>
</Router>
</div>
);
}
}
I have used webpack configurations to create the app as I am using react and Django. When I searched for solution on stack somebody commented on a post as if you are using webpack configurations for manually setting up the project it requires devServer : {historyApiFallback: true,} for react routes to work so what should I do please help me I've been stuck on this part from last two days If the above solution is right then please let me know where to write that following statement to make the react routes work...
I see you are using Browser Router as Router. One thing I would try is to use BrowserRouter without using as Router, just like this <BrowserRouter> </BrowserRouter>.
Another thing that I would try is to use HashRouter instead of BrowserRouter, and use it in the file index.js like this:
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
And your HomePage file should look like this:
import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { Switch, Route, Link, Redirect, Routes } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Routes>
<Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
<Route exact path='/join' element={ <RoomJoinPage/> }></Route>
<Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
</Routes>
</div>
);
}
}
If anything of this works, please share the version of react router dom and react if it's possible. Previously I also had problems of this style with RRD.
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>
I used BrowserRouter with his basename, my server is WINSCP, the routes works correctly but, when I refresh it or writing it manually, I get :
My App.js is :
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from "react-router-dom";
import { BackTop } from 'antd';
import Header from './components/Header/Header';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
import CreerActivite from './components/CreerActivite/CreerActivite';
import TypesRDV from './components/TypesRDV/TypesRDV';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/ReactCalendar">
<Header/>
<Switch>
<Route exact path="/" component={Planning} />
<Route exact path="/creerActivite" component={CreerActivite} />
<Route exact path="/typesRDV" component={TypesRDV} />
</Switch>
</BrowserRouter>
<BackTop />
</div>
);
}
}
export default App;
On my package.json, I have "homepage": "https://dev/ReactCalendar" and my folder on WINSCP is /dev/ReactCalendar/
How can I fix it ?
The reason why this is happening is your server does not know what to serve when you hit that URL. There are multiple approaches to solving your problem. I'll suggest the easiest approach here.
Replace BrowserRouter with HashRouter.
class App extends Component {
render() {
return (
<div>
<HashRouter basename="/ReactCalendar">
<Header/>
<Switch>
<Route exact path="/" component={Planning} />
<Route exact path="/creerActivite" component={CreerActivite} />
<Route exact path="/typesRDV" component={TypesRDV} />
</Switch>
</HashRouter>
<BackTop />
</div>
);
}
}
And obviously, don't forget to import HashRouter from 'react-router-dom'.
You can view other approaches here:
React-router urls don't work when refreshing or writing manually
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;