How routing with react-router-dom?

Question

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

Answer 1

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 .

Answer 2

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

Answer 3

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>
);
}
}