I have a component like this
class myApp extends React.Component {
return (
<div>
<NavigationBar />
{/* dynamic_content */}
</div> )
}
with this route
<Router>
<Route exact path="/" component={myApp}/>
</Router>
And it loads fine.
What I'd like to achieve is that when the url changes, for example
/profile
/notifications
the dynamic_content is updated, without actually transitioning to another component.
In pseudocode what I want is like
class myApp extends React.Component {
return (
<div>
<NavigationBar />
{route === '/profile' -> <Profile/>
route === '/notification' -> <Notification/>}
</div> )
is this even possible?
How can I do that?
Yes, it is possible, what you need is to define nested Routes like
class MyApp extends React.Component {
return (
<div>
<NavigationBar />
{/* dynamic_content */}
<Route path='/profile' component={Profile}/>
<Route path="/notification" component={Notification}/>
</div> )
}
and configure your Parent route without a exact props
<Router>
<Route path="/" component={MyApp}/>
</Router>
Also you must define your components with UpperCase character as the first letter
Related
My application is using react-router-dom v5.3 and I'm having trouble routing from the root url of my application to a child component (called the "See All" Page) while also passing props down. Currently, my code just renders an empty page whenever I navigate to the child component.
RootRouter.js:
export default function RootRouter() {
return (
<BrowserRouter>
<Switch>
<Route
path="/"
exact
render={() => <HomeView />}
/>
</Switch>
</BrowserRouter>
);
}
Homeview.js:
function HomeView() {
const seeAllViewTitle = "some_title_here"
return (
<div>
<div>Some content here!</div>
<Link to={`/seeall/${seeAllViewTitle}`}}>
<Button/>
</Link>
<Route path={`/seeall/${seeAllViewTitle}`}>
<SeeAllView
groupTitle={""}
pageData={[]}
eventHandler={some_function_here}
/>
</Route>
</div>
);
}
If I were to put the Route that is currently in homeview.js inside of Rootrouter.js, the component shows up, but I can't pass any props into it from there.
Issue
The HomeView component is rendered only when the path is exactly "/". When the link is clicked and navigates to "/seeall/some_title_here " the path no longer exactly matches and the HomeView component unmounts.
Solution
Remove the exact prop from the root route so nested/sub routes can also be matched and rendered.
export default function RootRouter() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={HomeView} />
</Switch>
</BrowserRouter>
);
}
If you did not intend for these components to be rendered at the same time then move the nested route out to the RootRouter component.
export default function RootRouter() {
return (
<BrowserRouter>
<Switch>
<Route path="/seeall/:title">
<SeeAllView
groupTitle={""}
pageData={[]}
eventHandler={some_function_here}
/>
</Route>
<Route path="/" component={HomeView} />
</Switch>
</BrowserRouter>
);
}
...
function HomeView() {
const seeAllViewTitle = "some_title_here"
return (
<div>
<div>Some content here!</div>
<Link to={`/seeall/${seeAllViewTitle}`}}>
<Button/>
</Link>
</div>
);
}
Are you remembering to receive props in the function declaration for HomeView? usually, you'll need to explicitly define that you are receiving props, either with a props variable or by defining specific prop names in an object syntax
In my react project I have a route which has multiple routes inside of it
<Route path="/journeys/journey1" component={Journey1} />
inside the Journey1 component I have multiple different routes
class Joureny1 extends React.component {
...
return (
<Switch>
<Route
path={`/terms`}
render={...}
/>
...
<Route component={PageNotFound} />
</Switch>
);
}
Is it possible for the terms route to point to url/terms instead if url/journeys/journey1/terms?
Here is my navigation component:
import React from 'react'
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'signUp', // or login
showModal: false,
isLoggedIn: false,
}
}
...some code
render() {
const { showModal, type, isLoggedIn } = this.state
console.log(this.props.location); // all problem is this, I'm not getting it in console
return(
...some more code
)
}
}
export default withRouter(Navigation)
And here is where it it been used in app.js
class App extends React.Component {
render () {
return(
<Router>
<Fragment>
<Navigation /> // <= right there
<Switch>
<Route exact path='/' component={HomePage}/>
<Route exact path='/search' component={HomePage}/>
<Route component={Lost} />
</Switch>
</Fragment>
</Router>
)
}
}
I want to get updated route props like match and location and history in my <Navigation /> component but I get it only when the first time that component mounts on the DOM, in my other components I update the route using window.history.pushState but I am not able to get route props from withRouter after link in the browser is been updated.
I update route with window.history.pushState because:
I could not find any way to update just link in the address bar without showing user or redirecting user to new component with React router DOM (am I doing it in right way or not?)
based on that I then use window.location.pathname to add some specific stylings to some components)
Also, I read the entirety of this and this but I could not solve this issue. What am I doing wrong?
withRouter gives you the closest <Route>'s route props, and since the Navigation component is not inside a Route you will not get the route props.
You could e.g. put the Navigation component on a Route outside of the Switch that will always be visible.
Example
class App extends React.Component {
render() {
return (
<Router>
<Fragment>
<Route path="/" component={Navigation} />
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/search" component={HomePage} />
<Route component={Lost} />
</Switch>
</Fragment>
</Router>
);
}
}
I am relatively new to react and attempting to create an app that has 2 designs. One is the public site that has a common header and footer and the internal app which has an admin header and side bar. I created a Router and 2 main routes '/' and '/app'. I then added subroutes hoping that if the parent routers were matched, it would show the parent component and pass the sub route's component as the this.props.children. I seemed to have done it wrong. Here is what I created.
App.js:
...
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route component={Public}>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Route>
<Route component={Main}>
<Route path="/dash" component={Dash}/>
<Route path="/people" component={People}/>
</Route>
</Switch>
</Router>
);
}
}
...
Public 'template':
...
render(){
return(
<div>
I am a public page
{this.props.children}
</div>
)
}
...
Home.js
...
class Home extends Component{
render(){
return(
<div>I am the home page</div>
)
}
}
...
App 'template'
...
class Main extends Component{
render(){
return(
<div>
<Header />
<div>I am an app page</div>
{this.props.children}
<Footer/>
</div>
)
}
}
...
Dash.js
...
class Dash extends Component{
render(){
return(
<div>I am the dash page</div>
)
}
}
...
Thanks and if any one can tell me or point me to a good resource I would appreciate it!
You're really close! What you need to do is actually put the template components as the parent not in a <Route /> component. A components children are the components in between its start and end tag. Keep on trucking !
class App extends Component {
render() {
return (
<Router>
<Switch>
<Public>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Public >
<Main>
<Route path="/dash" component={Dash}/>
<Route path="/people" component={People}/>
</Main>
</Switch>
</Router>
);
}
}
How to skip the react routing in case of file paths? It seems react router intercepts all links. Example below - the hardcoded link /1.pdf seems to trigger the router.
How do we trigger file downloads?
const Main = () => {
return (
<div>
<h1>React Router Playground</h1>
<Link to="/download">Download Area</Link>
</div>
);
};
const Download = () => {
return (
<div>
<h1>Download Area</h1>
Download
</div>
);
};
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Router>
<div>
<Route exact path="/" component={Main} />
<Route path="/download" component={Download} />
</div>
</Router>
);
}
}
This is a rather simple example so the hardcoded link. These are dynamic and passed as props in the actual code.
The following code combined with a NoMatch component should work, reloading the URL if it's a valid resource.
<Router>
<div>
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/download" component={Download} />
<Route component={NoMatch} />
<Route onEnter={() => window.location.reload()} />
</Switch>
</div>
</Router>