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 ponent.

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

But, the ponent 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'
                            ponent={Home}
                        />
                        <Route 
                            exact
                            path='/courses'
                            ponent={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.

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 ponent.

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

But, the ponent 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'
                            ponent={Home}
                        />
                        <Route 
                            exact
                            path='/courses'
                            ponent={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.

• javascript
• reactjs
• nwjs

Share Improve this question Follow edited Oct 20, 2018 at 12:57 Sreekar Mouli asked Oct 17, 2018 at 8:35 Sreekar MouliSreekar Mouli 1,44255 gold badges2727 silver badges5050 bronze badges 4

• 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 and the basic examples? – c-chavez Commented Oct 17, 2018 at 9:42
• I have updated the question! – Sreekar Mouli Commented Oct 17, 2018 at 9:46
• Have a look at the answer and let me know if it helps or if you need further help! – c-chavez Commented Oct 17, 2018 at 20:07
• are you still having this problem? can you post the plete ponent please? – c-chavez Commented Oct 28, 2018 at 14:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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 ponent

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

Have a look at this question in SO.

Use a Route like this:

<Route exact path="/" ponent={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="/" ponent={Home}/>
                            <Route path="/about" ponent={About}/>
                            <Route path="/:user" ponent={User}/>
                            <Route ponent={NoMatch}/>
                        </Switch>
                    </React.Fragment>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

Some tutorials and examples:

Have a look at these:

• react-router-v4-plete-guide
• getting-started-with-react-router-v4
• a-simple-react-router-v4-tutorial
• the-easiest-tutorial-on-react-router-v4-youll-ever-find