I'm working on my portfolio. I'm trying to put all components (Home, Skills, Projects, Contact) on one page, so I'm not planning to set routes for those component. However I want to set a route for project detail component, which I'll put a link on Projects component. I also want to set a route for 404 page.
I wrote the following code but it doesn't know ProjectDetail page when I access http://localhost:3000/projects. Can you give me advice how I can fix the problem?
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={<ProjectDetail />} />
<Route path='*' element={<Error />} />
</Routes>
</Router>
</>
);
};
export default App;
I think you need to wrap all the components that u want in one page and put it on a route like this: <Route path="/" element={<OnePageApp/>}/>
After this i don't see any other errors.
Good Luck, I hope i have been able to help you
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={ProjectDetail} />
<Route path='*' element={Error} />
</Routes>
</Router>
</>
);
};
export default App;
Related
after deploying reactjs website when i am refreshing the page i got error for example the home page is /
but the other page /aboutme when i click on link it routes me to about me page but when i refresh in a page that is not a home page i got blank page or error in the local host all is fine but in deploy ment i got error
app.js file :
import './App.css';
import Navbar from './Navbar';
import './Navbar.css'
import AnimatedRoutes from './AnimatedRoutes';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter as Router } from 'react-router-dom'
function App() {
return (
<div>
<Router>
<Navbar />
<AnimatedRoutes />
</Router>
</div>
);
}
export default App;
animatedroutes.js file :
import React from 'react'
import {Routes,Route,useLocation} from 'react-router-dom'
import HomePage from './HomePage';
import AboutMe from './AboutMe';
import Resume from './Resume';
import Contact from './Contact';
import Certificates from './Certificates';
import {AnimatePresence} from 'framer-motion'
function AnimatedRoutes() {
const location =useLocation();
return (
<AnimatePresence>
<Routes location={location} key={location.pathname}>
<Route exact path="/" element={<HomePage />} />
<Route path="/about" element={<AboutMe />} />
<Route path="/resume" element={<Resume />} />
<Route path="/contact" element={<Contact />} />
<Route path="/certificates" element={<Certificates />} />
</Routes>
</AnimatePresence>
)
}
export default AnimatedRoutes
I want deep link with dynamic route
My code is this
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../Routes/Home';
import Add from '../Routes/Add';
import Region from '../Routes/Region';
import Stores from '../Routes/Region/Stores';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/addBook" component={Add} />
<Route path="/:region" component={Region} />
<Route path="/:region/:store" component={Stores} />
</Switch>
<Link to={`/${"ulsan"}`}>
<button>go</button>
</Link>
</Router>
</div>
);
}
export default App;
and my region page is this
import React from 'react';
import { Link } from 'react-router-dom';
function Region() {
const store = "hello"
return(
<>
<Link to={`/${"ulsan"}/${store}`}>
<button>store</button>
</Link>
<div>Region</div>
</>
)
}
export default Region;
when I click store button, page is staying Region
I don't know how to move Stoer page with dynamic route
what is the problem???
Sorry I'm not good at English
The Problem is how you declare your routes, you need to add exact attributs:
<Route exact path="/:region" component={Region} />
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
React-Router appears to be working in my app except for the fact that I am getting a blank page instead of my component, even though it is directed to the proper path.
I'm scanning the documentation but I can't resolve the issue on my own after looking it over and searching Google/this site.
I had tried...
Making it so that the router.js file just contained the routes only to get the same results. Specifying exact path as well when doing so.
Reinstalling react-router-dom into the component in case there was an error when it downloaded.
Removing the provider in case that was the issue
Placing the code in the router file directly in the App.js file between the provider component tags
These are the files involved.
Router.js
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
App.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./services/Router";
import ChosenCityContextProvider from "./services/context/ChosenCityContext";
const App = () => {
return (
<BrowserRouter>
<ChosenCityContextProvider>
<Router />
</ChosenCityContextProvider>
</BrowserRouter>
);
};
export default App;
No error messages accompany the rendering of the site. Aside from the blank page, everything else appears to be working. In the React Dev tools, it states that the Router.Consumer has an object which is revealed to empty when expanded.
What is wrong with my code?
https://codesandbox.io/s/youthful-maxwell-rch1k?fontsize=14
Above is sandbox of code. I have the same issue here
I'm not certain why exactly this fixes the issue, but I've run into this on a work project so knew it worked.
If you add exact into the redirect element it forces the correct behavior.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect exact from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
I tried this and it worked. I'm not sure why before it didn't. If anyone has an explanation please let me know because I am trying to learn what I did wrong initially.
<Route render={() => <Redirect from='/' to='/landing' />} />
I added the above, so my router file looked like this.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
<Route render={() => <Redirect from='/' to='/landing' />} />
</Switch>
);
}
export default Router;
#DLowther has also showed me another solution
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";
const Router = () => {
return (
<Switch>
<Redirect exact from="/" to="/home" />
<Route path="/home" component={Home} />
<Route path="/page" component={Page} />
</Switch>
);
};
export default Router;
I would like to credit this individual for answering my question
I am trying to make my app redirect the users to a login page if it does not detect a Meteor.userId(), and to the home page if they do have one. The problem I am struggling with right now is getting a simple console.log function to run when a user visits a route (regardless of the path). How would I do this from a file the manages all the routes and components without having to insert a boilerplate code in each component.
import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Switch, BrowserRouter, Route, Redirect, Link } from "react-router-dom";
import { Tracker } from "meteor/tracker";
import Login from "../ui/authentication/Login";
import Signup from "../ui/authentication/Signup";
import Home from "../ui/Home";
import searchNotes from "../ui/searchNotes"
import Note from "../ui/Note";
import fullSize from "../ui/fullSize"
import userProfile from "../ui/userProfile";
import AddNote from "../ui/AddNote";
import questions from "../ui/questions"
import NotFound from "../ui/NotFound";
export default class Routes extends React.Component{
componentDidMount() {
console.log("rendering page")
}
render(){
return (
<div>
<BrowserRouter>
<Switch>
<Login path="/login" />
<Signup path="/signup" />
<Route path="/" component={Home} exact/>
<Route path={`/searchNotes/:subject`} component={Note} />
<Route path={`/searchNotes`} component={searchNotes} />
<Route path={`/fullSize/:noteId`} component={fullSize}/>
<AddNote path="/addNote"/>
<Route path="/questions" component={questions} />
<Route component={userProfile} path={`/users/:userId`} />
<NotFound />
</Switch>
</BrowserRouter>
</div>
)
}
}
Also, I tried doing export default withRouter(Routes) so I can change the redirect people to new pages, but when I do this it returns an error in the browser saying, "Uncaught TypeError: Cannot read property 'route' of undefined" If you know how to fix that, it would be much appreciated. Thanks!