BrowserRouter not working in create-nw-react-app

Question

I have created an app using create-nw-react-app. This basically creates a system app which uses reactjs.

So, I have created a route '/' which renders a particular component.

<Route 
    exact
    path='/'
    render={() => <Home />}
/>

But, the component was not getting rendered. So I have checked the url using window.location.href and this is the url that I have obtained:

chrome-extension://dkmbccbbedageiokbcmfaegjedpbegcf/index.html?

Is Routing even possible with create-nw-react-app?

"react-router": "^4.3.1", "react-router-dom": "^4.3.1",

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                {window.location.href}
                <Breadcrumb>
                    <BreadcrumbItem><a href='/home'>Home</a></BreadcrumbItem>
                    <BreadcrumbItem><a href='/courses'>Courses</a></BreadcrumbItem>
                </Breadcrumb>
                <BrowserRouter>
                    <Switch>
                        <Route 
                            exact
                            path='/home'
                            component={Home}
                        />
                        <Route 
                            exact
                            path='/courses'
                            component={CourseList}
                        />
                    </Switch>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

Only the Breadcrumb is getting rendered at start. Then, clicking any of those links is printing "Your file was not found" as Output.

Routing is possible with any react app, you just need to configure it properly. So, Can you please show us: 1) your react router version. 2) your import for react router and the use of BrowserRouter. 3) have you read and followed the official documentation on [react router](https://reacttraining.com/react-router/web/example/basic) and the basic examples? — c-chavez, Oct 17 '18 at 09:42
Have a look at the answer and let me know if it helps or if you need further help! — c-chavez, Oct 17 '18 at 20:07
are you still having this problem? can you post the complete component please? — c-chavez, Oct 28 '18 at 14:37

score 1 · Answer 1 · answered Oct 17 '18 at 12:03

Is Routing even possible with create-nw-react-app?

Routing is not dependent on this project's configuration but rather on the use of React-Router library and correct configuration and setting of the library. Basically you can add React-Router to any React project including React Native.

If you use a server to handle the application's requests, for example in a MERN stack, or using a node/express server, you will have to set up some additional settings and configuration (in the server) to handle the routing properly. Since this is not the case, I will continue with the client side case.

Swap render for component

Don't use the render function from the Route, but rather use the component prop to set the component that will be rendered in the Route.

Have a look at this question in SO.

Use a Route like this:

<Route exact path="/" component={Home} />

This is the basic use case for a Route and it's the easiest case of routing.

Switch Routing

Consider using Switch inside the BrowserRouter if you are going to use multiple Routes.

From the docs:

<Switch>

Renders the first child <Route> or <Redirect> that matches the location.

How is this different than just using a bunch of <Route>s?

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

So if you have multiple Routes, you can use Switch like:

import React, {Component} from 'react'
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom'
import Home from './Home'

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                <BrowserRouter>
                    <React.Fragment>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/about" component={About}/>
                            <Route path="/:user" component={User}/>
                            <Route component={NoMatch}/>
                        </Switch>
                    </React.Fragment>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

Some tutorials and examples:

Have a look at these:

I have updated the question. Sorry for the late reply. – Sreekar Mouli Oct 20 '18 at 12:58 — Sreekar Mouli, Oct 20 '18 at 12:58
the `` tags in your example are totally unnecessary – Titenis Apr 26 '19 at 08:34 — Titenis, Apr 26 '19 at 08:34

BrowserRouter not working in create-nw-react-app

1 Answers1