I need to render component with another route but this component must not cover all page. For example, I clicked on some question from stackoverflow list, and than I will receive animate from right to left modal, and I need to change route also
React router (I am using V4)
export default (
<Switch>
<App>
<Route exact={true} path="/" component={App} />
<Route exact={true} path="/product/:id" component={Product}/>
</App>
</Switch>
);
My product container looks like
export default function productContainer(ChildComponent) {
class ProductContainer extends Component {
render = () => {
return <ChildComponent/>
}
}
return ProductContainer;
}
And my product component
class Product extends Component {
render = () => {
return ("")
}
}
export default productContainer(Product);
When I emulate situation, which I describe above, my page fully rerendred and I don't see my App component Page
Have any idea, how I can resolve this issue?
People have asked how to render a modal as a route before in react-router without re-rendering (can't find the discussion right now). Essentially with react-router this is not possible. Each route change causes a re-render. That said, you can do what you want by nesting your routes.
Each component can return routes, so by using composition you can choose where to render any route.
For instance,
export default (
<Switch>
<App>
<Route path="/" component={App} />
</App>
</Switch>
);
Inside <App /> -
render() {
return (
<Something>
<PageHeader />
<Switch>
<Route path="/product/:id" component={Product}/>
</Switch>
</Something>
);
}
So you can see, if you were to add your routes inside the App component, they can all share a common page layout.
Remember: Any component can return multiple routes or just a single one inside a Switch! Switch will only render the first route that matches.
Also Remember: Routes inside a switch must be a direct child, you can't have Switch -> App -> Route, it must always be a direct child like Switch -> Route
Use render property instead of component in Route.
<Route exact={true} path="/" render={() => (
<div>
<App />
<Route exact={true} path="/product/:id" component={Product}/>
</div>
)} />
Related
I've noticed React Router DOM (v6) is now using functions in their help guides in regards to pages instead of using classes.
Previously used classes like so:
export class Login extends React.Component {
render() {
return <p>test</p>
}
}
However, after trying the latest version of React Router DOM I would receive an empty page for the navigation route.
import {Login} from "./js/components/Auth/Login";
function App() {
return <h2>Test</h2>
}
if (document.getElementById('app')) {
ReactDOM.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/login" component={() => <Login />} />
</Routes>
</BrowserRouter>, document.getElementById('app'))
}
App works fine ('/' route), but /login returns an empty page with no error..
Login refers to a class that uses render() and returns <p>test</p>
Am I doing something incorrectly? Are libraries leaning towards functions instead of class components?
This guide seems to be only using functions for components.
https://reactrouter.com/docs/en/v6/getting-started/tutorial
Class vs Function components is irrelevant in RRDv6, they simply render React components specified as JSX, not as a reference to a component, and not as a function returning JSX. There is also no render or component props, the Route components now use only element to render the route components.
<Routes>
<Route path="/" element={<App />} />
<Route path="/login" element={<Login />} />
</Routes>
I have my App component like this:
const App = (props) => (
<BrowserRouter>
<PageTheme {...some props I'd like to change on route change}>
<Switch>
<Route exact path="/example">
<Example {...props} />
</Route>
<Route exact path="/example/detail/:exampleId">
<ExampleDetail {...props} />
</Route>
</Switch>
</PageTheme>
</BrowserRouter>
);
The PageTheme component wrapping the Switch has some navigation UI, as well as some options about a page's background color, etc.. Is there a way to provide PageTheme some specific props for each route? Or is the best option to put a new PageTheme component inside of each Route? Thanks!
What you can do is to use withRouter and wrap PageTheme with it:
export default withRouter(PageTheme);
Or use useLocation hook if PageTheme is function component. Than you will have access to location and do your magic based on current route/url.
I got a react app that got a component that renders my HomePage. I decided to create another component so i can switch between pages on the site. For the HomePage it works when i enter the site, but clicking on navlinks is not working, also if i type the url /contacto i am not getting the render of Contact component, i get the render of the HomePage component, it's not switching between them.
class ContactPage extends Component {
render() {
return <div>HOLA</div>;
}
}
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={HomePage} />
<Route path="/contacto" component={ContactPage} />
</Switch>
</BrowserRouter>
);
}
Add exact to your HomePage route:
<Route exact path="/" component={HomePage} />
This is because the path / still matches in a non exact way to /contacto and the router renders the first match (that being your HomePage).
By adding exact, you're telling it not to match partial matches.
I am using react-router-dom#^4 and I am trying to render some deeply routed components. Here is a simplified version of my Base component.
export default function Base() {
return (
<Layout>
<Switch>
<Route exact path="/browse" component={Browser} />
</Switch>
</Layout>
);
}
This, in turn, will render the following component.
export default function Browser() {
return (
<Switch>
<Route exact component={ProjectPicker} />
<Route exact path=":projectId" component={ProjectDetail} />
</Switch>
);
}
While the root (/browse) does work, when I navigate into /browse/1 manually, it will fail. It essentially just renders nothing at all
Why is deeplinking failing here?
I think you need to add / in you path name
`<Route exact path="/:projectId" component={ProjectDetail} />`
see this official guide. https://reacttraining.com/react-router/web/example/url-params
I have two components, {App} and {Blog}, when I was trying to route to Blog page from App, actually the Blog page content was appended at the last of App page. How can I jump to the blog page from App page?
Routing:
const routes = (
<BrowserRouter>
<div>
<Route path="/" component={App}/>
<Route path="blog" component={Blog}/>
</div>
</BrowserRouter>
);
Meteor.startup(() => {
ReactDOM.render(routes, document.querySelector(".render-target"));
});
Blog.js:
class Blog extends Component{
render(){
return(
<div>Blog</div>
);
};
}
export default Blog;
You need to use the Switch component from react-router. This will make sure that the first route matches inside.
<BrowserRouter>
<Switch>
<Route path="blog" component={Blog}/>
<Route path="/" component={App}/>
</Switch>
</BrowserRouter>
As you can see in the example, put the blog route before the /. If you put the / route as your first route it will match this one on any other route and stop there.
For more info, check out this piece