We Keep Coding

My buttons are not redirecting to specified pages using react js? (I just started learning react) (Using old react version)

So, the problem is when I am trying to click Home in navbar its not redirecting the page to Textform component and when I am clicking about in navbar its not redirecting to about us page, but when i alter the url manually like adding localhost:3000 with "/about", its perfectly working..
enter image description here
I tried everything like altering the links and surfed the net but no solution resolved it.

If you are using react-router-dom go check there
https://reactrouter.com/en/main/start/concepts#defining-routes
You need to specify your links as related to each other. Just read the documentation and you will get it.
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path=":teamId/edit" element={<EditTeam />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
<Route element={<PageLayout />}>
<Route path="/privacy" element={<Privacy />} />
<Route path="/tos" element={<Tos />} />
</Route>
<Route path="contact-us" element={<Contact />} />
</Routes>

Converting from React-Router-dom v5 to v6 page contents not showing

I am having issues converting my code from meeting React-Router-Dom v5 requirements to V6 requirements. For some reason my webpage contents are not loading in the browser. Any help please? Ive tried doing the research and implementing different solutions but I havnt been able to fix the issue.
Here is my App.js
https://i.stack.imgur.com/USV67.png
Here is my index.js
https://i.stack.imgur.com/KG96P.png

Move TopBar out of the Routes component and move the Single component onto the route's element prop. The only valid children of the Routes component are the React.Fragment and Route components, and the only valid children of the Route component are other Route components.
Example:
function App() {
const user = false;
return (
<>
<TopBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/write" element={<Write />} />
<Route path="/settings" element={<Settings />} />
<Route path="/post/:postId" element={<Single />} />
</Routes>
</>
);
}

Exact path won't capture slug

I'm following along a course where I'm building a portfolio for myself in React. Everything I've done has worked thus far, except for this one issue I'm having.
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about-me" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/blog" component={Blog} />
<Route exact path="/portfolio/:slug" component={PortfolioDetail} />
<Route component={NoMatch} />
</Switch>
I have the switch running through my known slugs and my NoMatch is catching links that don't exist, unless I put a link that is formatted in the fashion of localhost:####/portfolio/non_existant_link.
Portfolio Detail Code:
import React from "react";
export default function(props) {
return (
<div>
<h2>Portfolio Detail for {props.match.params.slug}</h2>
</div>
);
}
No Match code:
import React from "react";
import { Link } from 'react-router-dom';
export default function() {
return (
<div>
<h2>We couldn't find that page</h2>
<Link to="/">Return to homepage</Link>
</div>
);
}
The instructor is using a slightly older version of react. What am I doing wrong?

One way to pass the slug is to use the render() of the route. There may be cleaner ways though so if anyone else has an answer for this I'd love to see it!
<Route exact
path="/portfolio/:slug"
render={(props) => (<PortfolioDetail path={props.history.location.pathname} />)}
/>
Another method is the useParams react hook as described here: Using the useParams hook in react

Alright, I think I figured it out so I'll type the answer that worked for me because I doubt I'm the same one running into the issue. The solution turned out to be a fix my brother (who's going through the course and has this part working) told me to try. It didn't work initially, but I think that has everything to do with a caching error. There HAS to be a space between your path and ":slug", like so:
render() {
return (
<div className='container'>
<Router>
<div>
<NavigationContainer />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about-me" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/blog" component={Blog} />
<Route exact path="/portfolio/ :slug" component={PortfolioDetail} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
</div>
);
}
Always check your cache when you run into a bug! This is a beginner mistake, and as a beginner, I have made it, so you shouldn't have to.

React - Router : Can't access a nested route

I have simple movie app with a home page and a watchlist page.
This is how I would like to structure it:
Home
/movie/id
Watchlist
watchlist/movie/id
I would like to access the movie/id from both the home page and the watchlist. Right now I can access it but the problem is when I open a movie when I'm on watchlist page it goes back to home and opens it from there, instead of staying on watchlist and opening it from there. I'm using React-Router v5.2. What should I write differently in the route? I tried /watchlist/movie/:id but then it didn't render the movie at all, only from Home.
function App() {
return (
<div className='App' style={{ overflowX: 'hidden' }}>
<GlobalStyles />
<Switch>
<Route exact path={['/movie/:id', '/']}>
<Home />
</Route>
<Route exact path={['/movie/:id', '/watchlist']}>
<Watchlist />
</Route>
</Switch>
</div>
);
}
export default App;
And that's the link for the movie page:
<Link to={`/movie/${id} `}>
</Link>

The issue is that the react router tries to match the first url and it is inside switch that will tell to render only one component , you need to remove switch , also donot forget to use BrowserRouter wrapper , as i donot see it in code
function App() {
return (
<div className='App' style={{ overflowX: 'hidden' }}>
<GlobalStyles />
<Route exact path={['/movie/:id', '/']}>
<Home />
</Route>
<Route exact path={['/movie/:id', '/watchlist']}>
<Watchlist />
</Route>
</div>
);
}

I rearranged my code the following way which fixed it. According to docs the more specific path like: /watchlist/movie/:id should come before the less specific path="/watchtlist".
<Switch>
<Route exact path='/watchlist/movie/:id'>
<MovieDetail pathId={pathId} />
</Route>
<Route path='/watchlist'>
<Watchlist />
</Route>
<Route path='/movie/:id'>
<MovieDetail pathId={pathId} />
</Route>
<Route exact path='/'>
<Home />
</Route>
</Switch>

Which way to declare nested routes in React-Router-Dom

I'm working with reactJs and trying to create some nested routes.
Below you can see the routing parts of my files :
main.js :
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('page')
);
App.js :
class App extends Component {
render() {
return (
<div>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={SignUp} />
<Route path="/contact" component={Contact} />
<ProtectedRoute path="/user/profile" component={Profile} />
<Route component={NotFound} />
</Switch>
<Footer />
</div>
);
}
}
Don't ask me why, but I want to create the following url's :
/signup : SignUp form
/signup/person : SignUp form part 2
/signup/person/:id : SignUp user id informations
I added this in my App.js file and It's works :
<Route exact path="/signup" component={SignUp} />
<Route exact path="/signup/person" component={SignUpPerson} />
<Route path="/signup/person/:id" component={SignUpId} />
But I want to know if it's a good way to create nested routes or it's better to separate the route like this post : https://stackoverflow.com/a/43846223/4023379
Or maybe an other way ?
Thanks

use nested routes if Pages have common logic/components like Header, Footer.
use separate routes if Page doesn't share similar logic. just because of url start with /singup not necessary mean you have to nested your components