How can I config the basename, or keep a path in url like localhost:8000/app and when I have to redirect to another Route the Router identify this /app as part of url and do not change it, this is my component structure.
import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
<Router history={browserHistory} >
<Route component={App}>
<Route path="/" component={Home} />
<Route path="/login" component={LoginContainer} />
<Route path="apresentacao">
<IndexRoute component={NameContainer} />
<Route path="2" component={HsContainer} />
<Route path="3" component={McContainer} />
<Route path="4" component={MpvContainer} />
</Route>
</Route>
</Router>
If you are using React Router v4, you can use the basename prop of the Router component to change the base of your app.
import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";
class App extends React.Component {
render() {
return (
<Router history={browserHistory} basename="/app">
<Route component={App}>
<Route path="/" component={Home} />
<Route path="/login" component={LoginContainer} />
<Route path="apresentacao">
<IndexRoute component={NameContainer} />
<Route path="2" component={HsContainer} />
<Route path="3" component={McContainer} />
<Route path="4" component={MpvContainer} />
</Route>
</Route>
</Router>
);
}
}
If you are using React Router v3, you need to install the history package separately and use the useBasename function.
import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";
import { useBasename } from 'history'
class App extends React.Component {
render() {
return (
<Router history={useBasename(() => browserHistory)({ basename: '/app' })}>
<Route component={App}>
<Route path="/" component={Home} />
<Route path="/login" component={LoginContainer} />
<Route path="apresentacao">
<IndexRoute component={NameContainer} />
<Route path="2" component={HsContainer} />
<Route path="3" component={McContainer} />
<Route path="4" component={MpvContainer} />
</Route>
</Route>
</Router>
);
}
}
Related
I have created a react application with a home page and survey containing 15 questions on 15 pages.
I used a BrowserRouter to wrap the home page in the '/' route. I listed the 15 pages under the MemoryRouter to make it display under the '/apply' route. The issue here is the initial entry is visible in the '/' route. MemoryRouter should not be visible in the '/' route. It should be there on the '/apply' path alone.
import React from "react";
import BusinessType from "./BusinessType";
import {
BrowserRouter as Router,
MemoryRouter,
Routes,
Route
} from "react-router-dom";
import Howmuch from "./Howmuch";
import Seeking from "./Seeking";
import Date from "./Date";
import AnnualRevenue from "./Annualrevenue";
import Creditscore from "./Creditscore";
import BusinessName from "./BusinessName";
import Industry from "./Industry";
import Deposit from "./Deposit";
import Zipcode from "./Zipcode";
import Name from "./Name";
import Phone from "./Phone";
import Email from "./Email";
import Home from "./Pages/Home";
import Require from "./Require";
import Apply from "./Apply";
function App() {
return(
<div>
<Router>
<div>
<Routes>
<Route exact path='/' element={<Home />} />
</Routes>
</div>
</Router>
<MemoryRouter initialEntries={['/apply']} initialIndex={0}>
<Routes>
<Route path='/apply' element={<BusinessType />} />
<Route path='/Qn2' element={<Howmuch />} />
<Route path='/Qn3' element={<Seeking />} />
<Route path='/Qn4' element={<Date />} />
<Route path='/Qn5' element={<AnnualRevenue />} />
<Route path='/Qn6' element={<Creditscore />} />
<Route path='/Qn7' element={<BusinessName />} />
<Route path='/Qn8' element={<Industry />} />
<Route path='/Qn9' element={<Deposit />} />
<Route path='/Qn10' element={<Zipcode />} />
<Route path='/Qn11' element={<Name />} />
<Route path='/Qn12' element={<Phone />} />
<Route path='/Qn13' element={<Email />} />
<Route path='/final' element={<Require />} />
<Route path='/congrats' element={<Apply />} />
</Routes>
</MemoryRouter>
</div>
);
}
export default App;
If I'm understanding your post and comments correctly it seems you are saying that the BusinessType component is being rendered even though the current URL path is "/". The issue here is that the MemoryRouter path matching isn't coupled to the browser's address bar and you've initialized to "/apply" and so that is the "path" that is matched and rendered regardless what the URL is in the browser's address bar.
I used two separate routers because all pages of the survey should be
under the '/apply' route.
In this case I'd suggest rendering all these routes in the main BrowserRouter under the appropriate route paths.
Example:
import React from "react";
import BusinessType from "./BusinessType";
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
...
function App() {
return(
<div>
<Router>
<div>
<Routes>
<Route path='/' element={<Home />} />
<Route path="/apply">
<Route index element={<BusinessType />} /> // "/apply"
<Route path='/Qn2' element={<Howmuch />} /> // "/apply/qn2"
<Route path='/Qn3' element={<Seeking />} /> // "/apply/qn3"
<Route path='/Qn4' element={<Date />} /> // "/apply/qn4"
...
<Route path='/Qn12' element={<Phone />} /> // "/apply/qn12
<Route path='/Qn13' element={<Email />} /> // "/apply/qn13
<Route path='/final' element={<Require />} /> // "/apply/final"
<Route path='/congrats' element={<Apply />} /> // "/apply/congrats"
</Route>
</Routes>
</div>
</Router>
</div>
);
}
export default App;
If I search "http://localhost:3000/" or "http://localhost:3000/login", my display is completely blank.
app.js
import React from 'react'
import Login from './pages/login'
import Home from './pages/home'
import Error from './pages/error'
import { Link, Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="*" element={<Error />} />
</Routes>
)
}
export default App;
home.js
import React from "react";
const Home = () => {
return <h1>The Home</h1>;
};
export default Home;
Refactor to look like:
import { Route, Routes, BrowserRouter } from 'react-router-dom';
// ...
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="*" element={<Error />} />
</Routes>
</BrowserRouter>
);
};
I work with react-router v6. I want to create a new route based on an id. On my homepage "example.com" I have a selection of articles. I want to create a detail view for each article "example.com/{id}". My approach looks like this:
App.tsx
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import ProjectWrapper from "./components/ProjectWrapper";
import Home from "./pages/Home";
import PageError from "./pages/PageError";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} >
<Route path=":id" element={<ProjectWrapper />} />
</Route>
<Route path="*" element={<PageError />} />
</Routes>
</BrowserRouter>
);
}
ProjectWrapper.tsx
import { useParams } from "react-router-dom";
import { ProjectList } from "../pages/algorithms/ProjectList";
import PageError from "../pages/PageError";
function ProjectWrapper() {
const { id } = useParams();
const project = ProjectList.find((project) => project.id.toLowerCase() === id?.toLowerCase());
if (project === undefined) return (<PageError />);
return (
<div>
{project!.shortDescription}
</div>
)
}
export default ProjectWrapper;
Am I missing something ?
With the given routing code:
<Routes>
<Route path="/" element={<Home />} >
<Route path=":id" element={<ProjectWrapper />} />
</Route>
<Route path="*" element={<PageError />} />
</Routes>
Home is what is called a Layout Route. Layout routes render some common logic and UI, and an Outlet component for nested Routes to render their content when matched.
Example:
import { ..., Outlet } from 'react-router-dom';
const Home = () => {
...
return (
<>
...
<Outlet /> // <-- nested routes render content here
</>
);
};
If you don't want the Home component to render along with children routes then place it on its own route.
Examples:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:id" element={<ProjectWrapper />} />
<Route path="*" element={<PageError />} />
</Routes>
or
<Routes>
<Route path="/">
<Route index element={<Home />} />
<Route path=":id" element={<ProjectWrapper />} />
</Route>
<Route path="*" element={<PageError />} />
</Routes>
I've been trying to solve this for a few hours now, everything I do returns this same error.
Matched leaf route at location "/cadastro" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.
routes.js file
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import App from './App';
import Cadastro from "./pages/cadastro";
import CadastroGuiasTuristicos from "./pages/cadastro-guia-turistico";
import DetalhesGuiasTuristicos from "./pages/detalhes-guias-turistico";
import GuiasTuristicos from "./pages/guias-turisticos";
import Home from "./pages/home";
import Login from "./pages/login";
import PlanoEstabelecimentos from "./pages/plano-de-assinatura/estabelecimentos";
import PlanoGuias from "./pages/plano-de-assinatura/guias-turisticos";
const RoutesTeste = () => {
return(
<BrowserRouter>
<Routes>
<Route path="/" component={ <Home/> }></Route>
<Route path="/cadastro" component={ <Cadastro/> }></Route>
<Route path="/cadastro-guia-turisticos" component={ <CadastroGuiasTuristicos/> }></Route>
<Route path="/detalhes-guias-turisticos" component={ <DetalhesGuiasTuristicos/> }></Route>
<Route path="/guias-turisticos" component={ <GuiasTuristicos/> }></Route>
<Route path="/login" component={ <Login/> }></Route>
<Route path="/estabelecimentos" component={ <PlanoEstabelecimentos/> }></Route>
<Route path="/guias-turisticos" component={ <PlanoGuias/> }></Route>
</Routes>
</BrowserRouter>
)
}
export default RoutesTeste;
App.js
import RoutesTeste from './routes';
export default function App() {
return (
<RoutesTeste/>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
In Route ,change component to element.
Instead of -
<Route path="/" component={ }>
<Route path="/cadastro" component={ }>
do this-
<Route path="/" element={ }>
<Route path="/cadastro" element={ }>
for all the Route.
Replace the component with element as follows;
<Route path="/" element={ <Home/> }></Route>
It will work...
I try create SPA but I get the error. It works only with incorrect url for 404 page
Uncaught Error: elements are for router configuration only and should not be rendered
error screenshot
import React from 'react';
import { render } from 'react-dom'
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
import Full from './containers/Full/'
import LoginPage from './containers/LoginPage/'
import Page404 from './views/Pages/Page404/'
import Dashboard from './views/Dashboard/';
const store = configureStore()
ReactDOM.render((
<Provider store={store}>
<Router history={browserHistory}>
<div>
<Route path="/" component={Full}>
<IndexRoute component={Dashboard} />
<Route path='dashboard' component={Dashboard} />
<Route path='login' component={LoginPage} />
</Route>
<Route path='*' component={Page404} />
</div>
</Router>
</Provider>
), document.getElementById('root'));
Try this:
const store = configureStore()
const routes = (
<Route path="/" component={Full}>
<IndexRoute component={Dashboard} />
<Route path='dashboard' component={Dashboard} />
<Route path='login' component={LoginPage} />
<Route path='*' component={Page404} />
</Route>
);
const App = (
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));