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.


Related Query

More Query from same tag