score:0
Accepted answer
the use in itself doesn't look wrong to me. however, the way i usually deal with this is by declaring the routes in a separate file in src.
here's what it'd look like:
src/routes.js:
import react from 'react';
import { browserrouter, route, switch } from 'react-router-dom';
import home from './pages/home';
import brand from './pages/brand';
import users from './pages/users';
import create from './pages/create';
export default function routes() {
return (
<browserrouter>
<switch>
<route path="/" exact component ={ home } />
<route path="/brand" component={ brand } />
<route path="/users" component={ users } />
<route path="/create" component={ create } />
</switch>
</browserrouter>
)
}
the keyword "exact" in the route means it'll be the home route. you'll usually assign it to the "/" route, like on the example above.
src/app.js:
import react from 'react';
import './global.css'
import routes from './routes';
function app() {
return (
<routes />
);
}
export default app;
the components would look pretty much like you showed. the link should work without issues if you declared all of them in routes.js.
Source: stackoverflow.com
Related Query
- React router using formate
- Programmatically navigate using React router
- Programmatically navigate using react router V4
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- How to mock history.push with the new React Router Hooks using Jest
- How to use React Router on top of Rails router (not using react-rails gem)?
- How to pass params into link using React router v6?
- Using React Router with CDN and without webpack or browserify
- How can I pass data using <Redirect> in react router v4?
- React Router V4 Implement NavLink inside a ListItem using Material UI
- Dynamic breadcrumbs using react router
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- How to pass the match when using render in Route component from react router (v4)
- Conditionally set active class on menu using react router current route
- Using React Router withRouter
- Managing redirects to a subdomain after authentication in a React/Rails application using React Router
- ReactJS - Handle POST requests using react router dom
- If condition to change route using React Router V4
- Reload the page gets 404 error using React Router
- React Router issue within library - using elements outside <Router>
- Using google adsense with React + React Router
- Using Redux Form with React Router
- get parameter value from url using React Router
- how to pass props to the route when using react router <Link>
- Passing data using state in Link tag in React router
- How do you pass data when using the navigate function in react router v6
- Why isn't React Native Drawer being triggered using React Native Router Flux + Redux?
- I receive error 404 on refreshing browser using React router in Laravel Mix
- Using render in react router dom with a private route
- Navigate to page after authentication using React Router v4
More Query from same tag
- RxJS inside React Functional Component
- react-chartjs-2 change axes text color
- React why is this simple array map function not returning anything?
- What does extension "jsx" do exactly?
- Calling ReactDOM.render repeatedly and memory leaks
- react router changes url but not navigating to page
- How to map nested JSON properties collected with JS fetch API and SWR
- Can I serve a create react app from an express server without running 'npm run build'?
- Testing React components that fetches data using Hooks
- Nested Routing for React.JS
- Prevent Re-Render of Functional Component Updating State in a Global Context
- Why is updateQueryData from RTK query not updating my state?
- Updating state item's quantity (React and useReducer)
- Cyclical/Recursive React PropTypes
- This.state is 0 inside .map
- Reactjs Slicing and keeping indexes
- Component is undefined when use react-bootstrap
- How to validate TextField with delay?
- Changing the color of Office UI Fabric React components
- props.children in react cannot be a stateless component?
- Dynamically rendering child components in react
- Detect when player has finished loading source after a new currentTime is set in videojs
- Need help to support multiple languages in a Gatsby site sourced from Yaml files
- How to best structure styles/component customisation in a React application with multiple tenants
- React Hooks LocalStorage setState override elements
- INTERNAL ASSERTION FAILED - firebase error in React JS while adding document to the collection
- How do I mock callbacks on a ref for testing in react?
- Return multiple <td> from map without wrapping them within an enclosed tag
- React-redux reselect performance
- joi-browser is not allowing empty string