I had the router specified as below, and having url http://localhost:8000/billing/bill/linematching/c55718e9-9d70-4b65-88ba-fca97d900ca5/693 is able to land on the TBLineMatchingPage
<Route
path="/billing/bill/linematching/:billingRunId"
component={TBCustomersPage}
/>
<Route
path="/billing/bill/linematching/:billingRunId/:accountNumber"
component={TBLineMatchingPage}
/>
But after someone did packages upgrade task, the same url cannot be landed to the TBLineMatchingPage anymore, and I have to move that route on top of TBCustomersPage in order for it to work.
<Route
path="/billing/bill/linematching/:billingRunId/:accountNumber"
component={TBLineMatchingPage}
/>
<Route
path="/billing/bill/linematching/:billingRunId"
component={TBCustomersPage}
/>
Is there a reason why? And what's changed?
Related
Hi guys so I'm trying to create front-end for my website using react-bootstrap and I try to change my hr width but it auto center itself, why is that ? and also i try to use className="text-center" from bootstrap to center things from my col but it didn't work, can anybody help me with that please ? I already import the bootstrap css but still didn't work.
here's my code:
<Row className="aboutus regular">
<Col className="aboutusleft" lg ="6" >
<h1 className="semibold"> About Us</h1>
<hr style={{width:'20%'}}></hr>
<p>Diamond Hotel serves as an urban oasis for both discerning business and leisure travelers. Located in the heart of Samarinda and close to the most prominent culinary tourism object. The hotel itself possess a trendy design with attention to comfort, quality and value based accommodation. It features 75 modern rooms and suites with contemporary design environment to make you feel completely at home.</p>
<button className="aboutbutton">Learn More</button>
</Col>
<Col className="aboutusright text-center" lg ="4">
<img src="./img/Group4.png"></img>
</Col>
</Row>
My index.js (CSS bootstrap located):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
<Col className="aboutusright mx-auto" lg ="4">
<img src="./img/Group4.png"></img>
</Col>
Please use "mx-auto" instead "text-center".
In the 1st, basic example in the quickstart, they include the nav (which is common to all routes) in the Router (pasted below for convenience). I can't tell from the code that this is necessary or preferable.
Must I/is it somehow best to likewise put my common components/elements inside the Router?
I suspect this was this simply shorthand to avoid wrapping multiple elements in the return from render (implicit render in this case).
// ...
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
// ...
It looks like I found my answer 😅.
If the common elements/components do not require use of any other react-router components, it should be ok to move them outside. In the linked example, the nav uses the react-router Link component, and so should be inside Router (same is true for other react-router components, e.g. Route
I'm using Next.js app which has a card component that has read more link. when the user clicks on read more link the card should expand, I have used "react-show-more" https://github.com/One-com/react-show-more. I need to add smooth expand to the card when press the read more link with CSS Transition rule but the CSS transition is not working. This is my card component. and you can find live demo here: https://codesandbox.io/s/confident-http-cfz7p?fontsize=14
return (
<CardOuter>
<CardIcon>
<img className="CardIcons" alt="cardIcon" src={Icon} />
</CardIcon>
<CardContent>
<h3>{Title}</h3>
<ShowMore
lines={5}
more={<Link className="link-right" Content="Read More" />}
less={<Link className="link-right-sl" Content="Show less" />}
anchorClass="showMore"
>
{Description}
</ShowMore>
</CardContent>
</CardOuter>
);
I found another npm that has smooth expand,
https://github.com/tinacious/react-animated-show-more
I have a React component App which is a child of <Router>. Within App, I am rendering different Components based on the url path using <Switch> and <Route> components.
I know that the role of <Switch> is to render (only) the first matching <Route> component.
My App's render function looks like this.
return (
<Switch>
<Route path='/somepath' component={SomeComponent} />
<Route path='/someotherpath' component={SomeOtherComponent} />
<Main>
<Route path='/anotherpath' component={AnotherComponent} />
<Route component={DefaultComponent} />
</Main>
</Switch>
);
The problem I faced was that when I am rendering AnotherComponent, DefaultComponent is also being rendered.
For now, it seems that wrapping the routes in <Main> into another <Switch> component will enforce the switch behavior. For example,
<Main>
<Switch>
<Route path='/anotherpath' component={AnotherComponent} />
<Route component={DefaultComponent} />
</Switch>
</Main>
So, is it a good practice to nest <Switch> components as I did? Is there a more elegant approach to achieve this?
I have this HomeContainer component, Home component and this Header component.
HomeContainer contains the state of city and <Home city={this.props.city} />
Home contains stateless function and contains JSX. so via this.props i can access HomeContainer's city
Problem - I want to send the data to Header so that i can update the city in header whenever someone inputs something in the input field
I think The Main component has access to child components but the Main component is called via routes so i am not able to figure this out.
Thanks
You have a jsx structure similar to:
<Main>
<Header />
<HomeContainer />
</Main>
Since the city property is to be used by both <Header /> and <HomeContainer />, then it shouldn't be defined in <HomeContainer />
city should instead be defined as a state in <Main /> and passed down to both <Header /> and <HomeContainer />
This implies that you also define the callback to changeCity() in <Main /> and pass it down to <HomeContainer /> as a prop.
This way, both <Header /> and </HomeContainer> will be updated with changes to the city attribute