Maybe somebody know why I can create subroutes
My code.
<Provider store={store}>
<Router history={history}>
<Route path="/" component={Main} >
<IndexRoute component={Home} />
<Route path="performance" component={Performance} />
<Route path="home" component={Home} >
<Route path="alert" component={Performance} />
</Route>
</Route>
</Router>
</Provider>
// ...
// imports
import Main from './Main'
import Performance from './performance/PerformanceComponent'
import Home from './home/HomeComponent'
import {Router, Route, IndexRoute} from 'react-router'
import {Provider} from 'react-redux'
I can't go to this address -> /home/alert
And Have this errors in console
alert:11 GET http://0.0.0.0:3001/home/css/style.css
alert:12 GET ...home/css/home.css
alert:13 GET ...home/css/detailsView.css
alert:26 GET ...home/bundle.tvc.js
I mean if I write wrong address I have special error
Warning: [react-router] Location "/homealert" did not match any routes
I don't have any idea how should I fix it. Thank you in advance!
You want this if you want to Performance component to render on /home/alert. You need to specify the complete path on each matching Routes.
<Route path="/" component={Main} >
<IndexRoute component={Home} />
<Route path="/performance" component={Performance} />
<Route path="/home" component={Home} >
<Route path="/home/alert" component={Performance} />
</Route>
</Route>
Nesting routes applies to components, not paths. Your app will render as below for /home/alert:
<Main>
<Home>
<Performance>
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;
I'm using react-router-dom V6
<Router>
<Routes>
<Route path="/">
<Route path="example" element={<h1>Example</h1>}>
<Route path=":id" element={<p>cool</p>} />
</Route>
</Route>
</Routes>
</Router>
"http://localhost:3000/example " renders Example so far good, but
"https://localhost:3000/example/34" renders nothing.
What is the problem?
Please provide a why and how to solve this issue.
When nesting routes, the parent routes need to render an Outlet component for the nested routes to render their element content into. Route components render an Outlet by default when no element prop is provided, so this is why the "/example" route works.
Example:
import {
BrowserRouter as Router,
Routes,
Route,
Outlet,
} from 'react-router-dom';
...
<Router>
<Routes>
<Route path="/">
<Route
path="example"
element={(
<>
<h1>Example</h1>
<Outlet />
</>
)}
>
<Route path=":id" element={<p>cool</p>} />
</Route>
</Route>
</Routes>
</Router>
If you don't want to render the "Example" component at the same time as its children, then render it alone on its own index route.
Example:
<Router>
<Routes>
<Route path="/">
<Route path="example">
<Route index element={<h1>Example</h1>} />
<Route path=":id" element={<p>cool</p>} />
</Route>
</Route>
</Routes>
</Router>
For more details, see:
Routes and Route
Layout Routes
Outlet
I'm trying to implement router in react-create-app but it always render "/" and showing Home or SignIn page. How can I solve this?
function AppRouter({ isLoggedIn, user }) {
return(
<Router>
<Routes>
<Route path="/profile" element={<Profile />} />
<Route path="/signUp" element={<SignUp />} />
{isLoggedIn
? <Route exact path={"/"} element={<Home user={user}/>} />
: <Route exact path={"/"} element={<SignIn />} />
}
</Routes>
</Router>
)
}
It seems you have a slight misunderstanding of how the HashRouter works with the UI.
import { HashRouter as Router, Route, Routes } from "react-router-dom";
import Profile from "./Profile";
import SignUp from "./SignUp";
import Home from "./Home";
export default function App() {
return (
<Router>
<Routes>
<Route path="/profile" element={<Profile />} />
<Route path="/signUp" element={<SignUp />} />
<Route path="/" element={<Home />} />
</Routes>
</Router>
);
}
The HashRouter handles routing with a URL hash value, i.e. everything after the "#" in the URL. If you are trying to render your app and access "<domain>/" instead of "<domain>/#/" the routing won't work.
For example in your running codesandbox demo, the base URL is "https://5p7hff.csb.app/". At this base URL the hash router isn't really working, and you should really be accessing "https://5p7hff.csb.app/#/" instead so the hash router is loaded and the app's internal routing can work.
From "https://5p7hff.csb.app/#/" you should be to then navigate to any of your routes, i.e. "https://5p7hff.csb.app/#/profile" and https://5p7hff.csb.app/#/signUp".
If you switch to a different router, like the BrowserRouter then the "/#/" is no longer used, the router and routes render from "/" where the app is running from. The routes would be "https://5p7hff.csb.app/", "https://5p7hff.csb.app/profile", and "https://5p7hff.csb.app/signUp".
I have the following on my index.js
<Router routes={routes} />
I would like to have routes section in a separate file, so far I tried this:
routes.js
export default (
<div>
<Route path="/" component={AppComponent}>
<Route path="/someother" component={AddProductComponent} />
</Route>
<Route path="/products" component={ListProductComponent} />
</div>
);
and in index.js
import routes from './routes';
<Router routes={routes} />
For some reason the app shows blank now. looks like the routes are not rendered.
UPDATE, this is my whole index.js except missing imports due stackoverflow companing about too much code put:
const rootReducer = combineReducers({
products: productReducer,
});
const store = createStore(
rootReducer,
applyMiddleware(thunk),
);
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} />
</Provider>
, document.getElementById('root')
);
Update routes.js
export default (
<Switch>
<Route exact path="/" component={AppComponent}/>
<Route path="/products" component={ListProductComponent}>
<Route path="/details/:productId" component={AddProductComponent} />
</Route>
</Switch>
);
You're missing the switch:
<Switch>
<Route path="/someother" component={AppComponent}>
<Route path="/products" component={ListProductComponent} />
<Route path="/" component={AppComponent}>
</Switch>
Also, your code will only show AppComponent, as any url (/, /home, /etc) starts with the slash you put in the path attribute. You might want that as a last page, a fallback.
The path attribute works with a wildcare: path="/" -> path="/**" are functionally the same. If you want an exact path, add exact to the Route.
If you mean to split routes into seperate files, you can do this:
<Switch>
<Route path={"/user"} component={UserRouter}/>
<Route path={"/product"} component={ProductRouter}/>
</Switch>
// In userRouter.jsx:
export function UserRouter() {
return <Switch>
<Route exact path={"/user/list"} component={UserListPage}/>
<Route exact path={"/user/signup"} component={userSignupPage}/>
<Route exact path={"/user/profile"} component={UserProfilePage}/>
</Switch>
};
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>
);
}
}