Develop Reference

React- Navlink error with Menu.item from semantic-ui

New to react, So a little confused on why this was giving me an error.
This is my main.js file
const Main = () => (
<div>
<Menu pointing secondary stackable>
<Menu.Menu position='right'>
<Menu.Item active as={NavLink} exact to='/' name='Welcome' />
<Menu.Item as={NavLink} to='/powersection' name='power' />
</Menu.Menu>
</Menu>
<Segment raised className='magentaSegment'>
<Routes>
<Route exact path='/' element={<HomeView />} />
<Route path='/powersection' element={<PowerSection />} />
</Routes>
</Segment>
</div>
)
export default Main
This is what my App.js file looks like
function App() {
return (
<div id='container'>
<div id='main'>
<Routes>
<Route path='/' element={ <Main />} />
</Routes>
</div>
<div id='footer'>
<Footer />
</div>
</div>
);
}
export default App;
And this is my index.js file.
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
When I toggle to the Power menu item. this is the error i get
index.js:44 No routes matched location "/powersection"
Anyone know how i can fix this? Thank you

After adding framer-motion, routing not works but link change

I added framer motion to my project, because i want to make some animations between pages, but now i've been staying all the time at the home page. I will be grateful for any help. Here's my code:
class App extends Component {
//(...)
location = () => {
useLocation();
}
//(...)
<Router>
<nav>
{!this.state.setIsAuth ? (
<>
<Link to="/">Home</Link>
<Link to="/contact">Contact</Link>
<Link to="/login"> Login </Link>
</>
) : (
<>
<Link to="/news"> News </Link>
<Link to="/createpost"> Create Post </Link>
<Link to="/calendar"> Calendar </Link>
<a href="/" onClick={this.signUserOut}> Log Out</a>
</>)}
</nav>
<AnimatePresence>
<Routes location={this.location} key={this.location.pathname}>
<Route exact path="/" element={<Home />} />
<Route path="/news" element={<News />} />
<Route path="/login" element={<Login setIsAuth={this.signIn} />} />
<Route path="/contact" element={<Contact />} />
<Route path="/createpost" element={<CreatePost setIsAuth={this.signIn} />} />
<Route path="/calendar" element={<Calendar />} />
</Routes>
</AnimatePresence>
</Router>
and Home.js to show you how structures of my pages look like
class Home extends Component {
render() {
return (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<header className="header">
<div className="header__text-box">
<h1 className="heading__text-box">
<span className="heading-primary--main">TeamWork</span>
<span className="heading-primary--sub">THE WAY TO SUCCESS</span>
</h1>
Take your opportunity
</div>
</header>
</motion.div>
)
}
}

react-router-bootstrap - Warning: Functions are not valid as a React child

I am using react-router-dom and react-router-bootstrap to handle routing in my react-typescript-react-bootstrap web app and I am getting the following error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Routes#http://localhost:3000/static/js/bundle.js:60069:7
Router#http://localhost:3000/static/js/bundle.js:60006:7
The project isn't throwing any errors but the routing is not responding. Here's the index and components:
index.tsx
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<SiteNav />
<Routes>
<Route path="/home" element={Home} />
<Route path="/about" element={About} />
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
SiteNav.tsx
class SiteNav extends Component {
render() {
return (
<div className="Nav">
<Navbar bg="light" expand="lg">
<Container>
<LinkContainer to="/home">
<Navbar.Brand>The Pirate Hostel</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<LinkContainer to="/home">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}
}
export default SiteNav;
home.tsx
class Home extends Component {
render() {
return (
<div className="Home">
<body>home</body>
</div>
)
}
}
export default Home;
about.tsx
class About extends Component {
render() {
return (
<div className="About">
<body>About</body>
</div>
)
}
}
export default About;
What am I missing?
edit---- updated with the following but still getting the same error
const About = () => {
<div className="About">
<body>About</body>
</div>
}
export default About
const Home = () => {
<div className="Home">
<body>home</body>
</div>
}
export default Home;

In react-router-dom#6 the Route component's API changed a bit. The element prop takes a ReactNode, i.e. JSX, not a reference to the component.
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>

React-Router-DOM: unable to render Link in the same page (component)

consider the following example, I have a login page and an admin page. After logging in we will be redirected to admin page.
The admin page is shown as follows.
Desired behaviour: To render cars component in the admin component itself
Actual behaviour: On clicking cars or bikes component they are being rendered on a different page.
code is as follows
App.js
//imports here
function App() {
return(
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/admin" component={Admin} />
<Route exact path="/cars" component={Cars} />
<Route exact path="/bikes" component={Bikes} />
</Switch>
</Router>
);
}
Admin.js
//imports here
const Admin = () => {
return (
<Fragment>
<div className="is-flex">
<Sidebar />
<Navbar />
</div>
</Fragment>
);
};
navbar.js
// imports here
const Sidebar = () => {
return (
<aside className="aside">
<p className="menu-label">Test Routes</p>
<ul className="menu-list">
<li>
<Link to="/cars">Cars</Link>
</li>
<li>
<Link to="/bikes">Bikes</Link>
</li>
</ul>
</aside>
);
};
Using react-router-dom ^5.1.2
Tried this but not able to understand what I missed? how to solve this problem?

Move your default route to the bottom of the stack. i.e.
function App() {
return(
<Router>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/cars" component={Cars} />
<Route path="/bikes" component={Bikes} />
<Route exact path="/" component={Login} />
</Switch>
</Router>
);
}

<Link to >route when using <Switch>

I am new to react, I have a few routes that I created. The proper way from what I have read is to use a Switch that groups the routes, When I do this one of the Links with the same route no longer works.
How it is set up in the Nav bar I have a Link for the logo to go to /find route as you can see I have in the navbar I also have a Navbar link going to Find Customers. This route/link works with switch the Logo link does not.
As soon as I remove Switch All links work again.
_---------------------------------_
//Main JS
render() {
return (
<div>
<Nav />
{/* <Switch> */}
<Route exact path='/create' component={Createcust}/>
<Route exact path='/find' render={(props) => <Findcust theCust = {this.state.allUsers} searchRes = {this.searchRes} />}/>
<Route exact path='/find' render={(props) => <FoundCust theCustomers = {this.state.searched} loading={this.state.loading} />}/>
<Route exact path='/customerInfo/:custid' component={CustomerInfo} />
<Route exact path='/DelUser/:custid' component={DelUser} />
{/* </Switch> */}
</div>
)
}
_----------------------------------_
//Navbar Comp
render() {
return (
<div>
<nav>
<div className="nav-wrapper">
<Link to ="/find" className="brand-logo">Logo </Link>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li><NavLink exact to="/create">Create A Customer</NavLink></li>
<li> <NavLink exact to="/find">Find A Customer</NavLink></li>
</ul>
</div>
</nav>
</div>
)