In the following React app w/ two routes the URL http://myapp routes properly to the Layout component. However, the URL http://myapp/login also routes to the Layout component rather than Login. If I change the path="/login" to "/signin" it routes properly to the Login component.
Is there something special about the "/login" path in React Router that routes it to the route? Or is there an error in the way I've setup this routing?
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { NotFound } from './components/NotFound';
import { Login } from './components/Login';
//Redux store
import { Provider } from "react-redux";
import store from "./store";
function renderApp() {
ReactDOM.render(
<Provider store={store}>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Layout} />
<Route exact path="/login" component={Login} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</Provider>,
document.getElementById('react-app')
);
}
renderApp();
So, it appears you have to be careful that the basename attribute is correctly specified for route matching. "/" matches "/login" but "~/" is incorrect. Consider if you need the basename attribute and if so be careful to consider its value.
Related
I am trying to use routing for the first time and followed the exact instructions from Youtube
App.jsx
import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Customer from "./components/customer";
import Movies from "./components/moviesComponent";
import NotFound from "./components/not-found";
import Rentals from "./components/rentals";
class App extends Component {
render() {
return (
<Routes>
<Route path="/movies" element={<Movies />}></Route>
<Route path="/rentals" element={<Rentals />}></Route>
<Route path="/customers" element={<Customer />}></Route>
<Route path="/not-found" element={<NotFound />}></Route>
</Routes>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "hover.css";
import "./App.css";
import { BrowserRouter, Routes } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<App />
</Routes>
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
I get the following error:
Uncaught Error: [App] is not a <Route> component. All component
children of <Routes> must be a <Route> or <React.Fragment>
I am using react-router latest version.
Just render App in the router, not a Routes component. Only Route and React.Fragment components are valid children of the Routes component.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Looks like you have Routes tag at 2 places. One in App.js and one in index.js. You should remove it from index.js file and than give it a try.
https://reactrouter.com/docs/en/v6/getting-started/overview
I'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors.
In Router.js
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
In SinglePriceGrid.js
import React from 'react';
import '../css/SinglePriceGrid.css'
class SinglePriceGrid extends React.Component {
render() {
return (
<div className="SinglePriceGrid">
<h1>Hello Single Price Grid!</h1>
</div>
);
}
}
export default SinglePriceGrid;
edit: Added the imports I used
edit: Readded the Switch, but it did not solve the problem
keep the Routes inside Switch. Try this
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
I'm really sorry, but the error is really humiliating. My path is wrong. I used "page" instead of "price" for the endpoint.
React Router is changing the url but is not loading the component.
And once the url is changed and if the page gets refreshed, the correct component corresponding to the url is shown.
This is the code :
import React from "react";
import { Route, Switch } from "react-router-dom"
import { Link, BrowserRouter as Router } from 'react-router-dom'
import {Home} from '../src/Views/Home';
import {Test} from './Views/Home';
import App from '../../../src/App'
const Root = () => (
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/test" component={Test} />
</Switch>
</Router>
);
export default Root;
There are no console errors.
I have my application that works with a hash router with routes like "login" "register" "dashboard" and I would like to integrate react-admin. I would like to use react admin on my /admin route.
What I do:
App.js
import React, {Component} from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import {Provider} from 'react-redux'
import Store from './store/configureStore'
import RegisterView from "./view/RegisterView"
import LoginView from "./view/LoginView"
import DashboardView from "./view/DashboardView"
import AdminView from "./view/AdminView"
import jsonServerProvider from "ra-data-json-server";
import { Admin, Resource, BooleanField } from "react-admin";
import { UserList, UserEdit, UserCreate } from './users';
const dataProvider =
jsonServerProvider("https://jsonplaceholder.typicode.com");
class App extends Component {
// Provider store is used to use the store of the redux
// Router is used to define the route and the component to display
render() {
return (
<div>
<Provider store={Store}>
<Router basename="/">
<div>
<Route exact path="/" component={LoginView}>
</Route>
<Route exact path="/register" component={RegisterView}>
</Route>
<Route exact path="/login" component={LoginView}>
</Route>
<Route exact path="/dashboard" component={DashboardView}>
<Route exact path="/admin" component={AdminView}>
<Admin dataProvider={dataProvider}>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
/>
</Admin>
</Route>
</div>
</Router>
</Provider>
</div>
);
}
}
export default App;
it displays my react-admin but with my other components (display bug). I would like the react-admin part only in my /admin routes.
For me, the section should only be working in the /admin because i gave this path to my route.
What don't I understand?
Very new to react, I'm trying to separate the landingpage, login/signup and the app in react router but I cant to make it work, the page always loads the layout of the landing page and under it the login.
// Imports
import 'bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
// Data
import Landing from "./components/landing/landing";
import login from './components/app/auth/login';
// App
const Root = () => (
<Router>
<Route path="/" component={Landing} />
<Route path="/login" component={login} />
</Router>
)
ReactDOM.render(
<Root />,
document.querySelector("#root")
)
// Service worker
serviceWorker.unregister();
You have to use exact path within the component. It will look like <Route exact path="/" component={Landing} />
The same goes for the login page.