CODEWITHSUNDEEP
javascriptreactjsroutes
Mohammad
Mohammad

Reputation: 4641

How routing with react-router-dom?

I installed react-router-dom and use this code for routing, But i have error :

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';


class Home extends React.Component{
    render(){
        return(
            <h1>Home</h1>
        );
    }
}

class About extends React.Component{
    render(){
        return(
            <h1>About</h1>
        );
    }
}

ReactDOM.render(
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
    </Switch>,
    document.getElementById('main')
);

What's the right way for routing in reactjs ?

tnx

Upvotes: 3

Views: 1038

Answers (3)

Pushpanjali
Pushpanjali

Reputation: 41

Kay Concepts
<BrowserRouter> is needed because

  • Each router creates a history object, which it uses to keep track of the current location and re-render the website whenever that changes
  • A React Router component that does not have a router as one of its ancestors will fail to work.
  • Router components only expect to receive a single child element. To work within this limitation, it is useful to create an component that renders the rest of your application.

<Route>

  • The component is the main building block of React Router. Anywhere that you want to only render content based on the location’s pathname, you should use a element.

<Path>

  • When the current location’s pathname is matched by the path, the route will render a React element.

<Switch>

  • You can use the component to group s.
  • The will iterate over its children elements (the routes) and only render the first one that matches the current pathname.

I think you should create different component for Routes.

I'll just explain general project structure here

You can create component to hold <Header> and <MainContent> As <Header> will be same througout the application and it will not change if path changes. You can include routes in <MainContent> which will be updated if path changes.

MainContent.js

import { Switch, Route } from 'react-router-dom';

  const MainContent = () => (
    <main>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
      </Switch>
    </main>
 )

 export default MainContent;

Layout.js

class Layout extends Component {
     render() {
        return (
            <div className={classes.root}>
                <Header />
                <MainContent />
            </div>
        );
}

Now you can use <BrowserRouter>to wrap your <Layout> in App.js . or you can use it in <MainContent> as well

App.js

import { BrowserRouter } from "react-router-dom";
class App extends  Component {
render() {

return(
<BrowserRoter>
  <Layout />
 </BrowserRouter>
);
}
}

Upvotes: 1

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

Wrap BrowserRouter around your Switch like below,

<BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
    </Switch>
</BrowserRouter>

Here is the working code demo in codesandbox.

Upvotes: 3

Fabien Greard
Fabien Greard

Reputation: 1894

  1. You didn't import BrowserRouter
  2. You should wrap your <Switch> arround <BrowserRouter> tag
  3. Better use a component than trying to render a <Switch> element

You may find anything your looking for on this link :

https://reacttraining.com/react-router/web/guides/philosophy

Also i made a quick pen : https://codepen.io/FabienGreard/pen/KZgwKO?editors=1010

Upvotes: 2

Related Questions