I want to add the base URL to my react.js project.
However I had tried couple of methods that did not work.
For example, if my project url is :
http://www.myproject.com/
It should appear in address bar as :
http://www.myproject.com/app
http://www.myproject.com/app/home // If home page
http://www.myproject.com/app/about // If about page
Below is my project code.
index.js
import "./index.css"
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from './context/AuthProvider';
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import { disableReactDevTools } from '#fvilers/disable-react-devtools';
import App from './App';
if (process.env.NODE_ENV === 'production') {
disableReactDevTools();
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<AuthProvider>
<Routes>
<Route path="/*" element={<App />} />
</Routes>
</AuthProvider>
</BrowserRouter>
);
App.js
import Layout from './components/authController/Layout'
import Login from './components/authController/Login';
import Home from './components/authController/Home'
import AllUser from './components/authController/AllUser'
import RequireAuth from './components/authController/RequireAuth';
import PersistLogin from './components/authController/PersistLogin';
import Logout from './components/authController/Logout';
import Missing from './Missing';
import {Routes, Route, Navigate} from 'react-router-dom'
function App() {
return (
<div>
<Navbar/>
<Routes>
<Route path="/" element={<Layout />}>
{/* public routes */}
<Route path="login" element={<Login />} />
<Route path="loggedOut" element={<Logout />} />
{/* we want to protect these routes */}
<Route element={<PersistLogin />}>
<Route path="/" element={<Navigate to="/home" replace />} />
<Route path="home" element={<Home/>} />
<Route element={<RequireAuth/>}>
<Route path="alluser" element={<AllUser />} />
</Route>
</Route>
{/* catch all */}
<Route path="*" element={<Missing />} />
</Route>
</Routes>
</div>
);
}
export default App;
What I had tried?
As I referred in stackoverflow and also many other websites, integrated below methods.
Added base url inside package.json file
"homepage": "/app",
Tried to pass the tag <base href="http://myapp.com/app"> within <head> tag in public/index.html page
Passed the base url within BrowserRouter in index.js <BrowserRouter basename="app"> </BrowserRouter>
I am sure I am missing something, it would be great learning if someone help on this or give insights on this.
Thank you
I don't know the correct answer to this , but I believe that you can redirect the route "/" to "/app" . I hope this can help you
Solution:-
Hello everyone.
I got the solution for my query.
I have modified the index.js file like below
<Routes>
<Route path="app/*" element={<App />} />
<Route path="/*" element={<Navigate to="app/home" replace />} />
</Routes>
Related
in my react app routing is not working and it throws an error in the console. in my index file
import { BrowserRouter as Router, Route } from 'react-router-dom';
<React.StrictMode>
<Router>
<Route path="/" element={<App />} />
</Router>
</React.StrictMode>
and in my App.js
import { Route, Routes, useHistory } from 'react-router-dom';
function App() {
return (
<div className="App">
{/* <DataProvder> */}
<Sidebar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/students' element={<Students />} />
<Route path='/schools' element={<Schools />} />
<Route path='/campus' element={<Campus />} />
<Route path='/placement' element={<Placement />} />
<Route path='/courses' element={<Courses />} />
<Route path='/staff' element={<Staff />} />
</Routes>
{/* </DataProvder> */}
</div>
);
}
export default App;
When running this there is nothing to display, but in the console it throws this error:
Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
What am I doing wrong here?
The <Route> in index.js needs wrapping with <Routes>
All Route components must be rendered by either a Routes component or another Route component in the case of nesting routes.
The Route in the index.js file is wrapped and rendered by the Router which is invalid. To resolve wrap it in a Routes component.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
<React.StrictMode>
<Router>
<Routes>
<Route path="/" element={<App />}/>
</Routes>
</Router>
</React.StrictMode>
Or just render App directly since it handles rendering Home on path "/" for you.
import { BrowserRouter as Router } from 'react-router-dom';
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
I learnt that after the newly released react packages, the tag in react-router-dom do not work again so I changed to "Routes" after a couple of research online but still, it isn't working. Below is a screenshot from my PC.
Also this is the code
import React from 'react';
import Navbar from './components/Navbar'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';
function App(){
return (
<>
<Router>
<Navbar />
<Routes>
<Route exact path="/" component={Home} />
<Route path="/services" component={Services} />
<Route path="/products" component={Products} />
<Route path="/sign-up" component={SignUp} />
</Routes>
</Router>
</>
);
}
export default App;
//<HeroSection />
//import HeroSection from './components/HeroSection';
On new version of react-router-dom this should work. Check it.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/products" element={<Products />} />
<Route path="/sign-up" element={<SignUp />} />
</Routes>
Paste your error please. There would another issue
I am trying to create a website with React, but my code is not working and i dont understand why..
I have this code in index.js, because I want my header to always be there.
const element = <h1>Header</h1>; ReactDOM.render(element, document.getElementById('root'));
I have created a few components, and I have this code in my App.js
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch, Link, BrowserRouter} from 'react-router-dom';
import {Home} from './Components/Home';
import {About} from './Components/About';
import {Contact} from './Components/Contact';
import {Resume} from './Components/Resume';
import {Photos} from './Components/Photos';
import {NoMatch} from './Components/NoMatch';
class App extends Component {
render(){
return(
<React.Fragment> <Router> <switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/resume" component={Resume} />
<Route path="/photos" component={Photos} />
<Route component={NoMatch} />
</switch>
</Router>
</React.Fragment>
);
}
}
And all my components looks like this now, just temporarly:
import React from 'react'
export const About = () => (
<div>
<h2>About</h2>
</div>
)
The problem is that i only see "Header" on all pages, and when i change the path to localhost../About, it does not show anything else but "Header".
Why is not my code working and the code in my components showing in the different paths?
I've used the npm create-react-app and uses visualstudiocode. Thank you for the help, much appreciated :)
Btw, im following a tutorial and it is working for him but not me for some reason...
The Switch needs to be with a capital letter 'S'
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/resume" component={Resume} />
<Route path="/photos" component={Photos} />
<Route component={NoMatch} />
</Switch>
</Router>
Shouldn’t ‘switch’ be with a capital letter ( Switch )?
Is <switch> with lower case on purpose? It should be <Switch>
Anyway, I would like to see your code in a code sandbox if it's not the problem
I came from Angular framework to React and I got confused with router library. I'm trying to create Login page as a separate page in my app which is should contain Navigation and Footer which is part of Main.
I added this code to solve it but run into trouble.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Route path="/">
<App />
</Route>
<Route path="/login">
<Login />
</Route>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/">
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}
I'm using react-router-dom library.
So the main idea is I desire to load /login page without Navbar and Footer but for other pages in my app like Admin, Dashboard I want them to load with Navbar and Footer (I don't want use conditional rendering here).
But now when I go to /login page I see Navbar and Footer, also I can't go to dashboard.
Please try this.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<App />
</Route>
</Switch>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
<Route exact path="/">
<Redirect to="/dashboard" />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}
Add the exact property to the route element
In my experience, it is the best practice to place the root path('/') with ëxact props at the later route just before NotFoundPage.
I think it is the same as in Angular router.
I created the component NotFound and it works fine when I go to a page that doesn't exist. But the same page it's appearing in all my pages, not only the one that doesn't exist. This is the component:
import React from 'react'
const NotFound = () =>
<div>
<h3>404 page not found</h3>
<p>We are sorry but the page you are looking for does not exist.</p>
</div>
export default NotFound
And this is how I used it in the main page:
class MainSite extends Component {
render () {
return (
<div>
{/* Render nav */}
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
{/* Dashboard page */}
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
{/* Retrospectives page */}
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
{/* Users page */}
<ProtectedRoute exact path='/users' component={UsersPage} />
{/* Projects page */}
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
{/* Retrospective related pages */}
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
<Route exact path='/join-retrospective' component={JoinRetrospective} />
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
{/* OnBoarding pages */}
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
<Route exact path='/auth-handler' component={AuthHandler} />
<Route exact path='/join-organization' component={JoinOrganization} />
</div>
)
}
}
export default MainSite
As you can see I use <Route path="*" component={NotFound} /> to create the 404 pages, but that component is appearing in every existing page as well. How can I fix this?
Try this one:
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
<Route path="" component={NotFound} />
</Switch>
All below example works fine:
<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path
Or if you want to return a simple 404 message without any component:
<Route component={() => (<div>404 Not found </div>)} />
For those who are looking for an answer using react-router-dom v6, many things had changed. Switch for example doesn't exists anymore, you have to use element instead of component, ... Check this little example to get you an idea:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './index.css'
import App from './App'
const Test = () => (
<h1>404</h1>
)
ReactDOM.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/' element={<App />} />
<Route path='*' element={<Test />}/>
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
)
With this you are defining your home route and all the other routes will show 404. Check the official guide for more info.
Try This:
import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
class App extends React.Component {
render(){
return(
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path="*" component={NotFoundPage} />
</Switch>
</BrowserRouter>
)
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Simply import Switch from react-router-dom and wrap all your Routes in the Switch Component. Also Important here is to note to keep your 404Page component at the very bottom(just before your switch ending tag) This way it will match each component with its route first. If it matches, it will render the component or else check the next one. Ultimately if none matching routes will be founded, it will render 404Page
react router is a headache for new coders. Use this code format. This is class component but you can make a functional component and use it.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
import Footer from './Footer';
class App extends React.Component {
render(){
return(
<Router>
<Routes>
<Route exact path='/' element={HomePage} />
<Route path="*" element={NotFoundPage} />
</Routes>
<Routes>
<Route path="/" element={Footer}/>
</Routes>
</Router>
)
}
}
export default App;