route redirects to nothing react-router 4

Question

I'm not sure why everything is redirecting to a blank page:

I'm using:

"react-router": "^4.2.0",
"react-router-dom": "^4.1.1",

App.js

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

    class Container extends Component{
      render() {
        return (
          <div>{this.props.children}</div>
        );
      }
    }

    export default class App extends Component {
      render() {
        return (
          <BrowserRouter onUpdate={onUpdate}>
            <Switch>
              <Route component={HomePageContainer} exact path="/" />
              <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
              <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
              <Route component={Container} path="/" />
              <Route component={NotFound} path="*" />
            </Switch>
          </BrowserRouter>
        );
      }
    }

Homepage route to '/' is working fine.

What's not working are all the other routes.

For example when a user clicks a hyperlink that redirects to these routes or other routes other than the default route, I'm getting a blank page:

   <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
      <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />

Here is how my routes were working when I was using react-router v3:

<Router history={browserHistory} onUpdate={onUpdate}>
    <Route path="/">
      <IndexRoute component={HomePageContainer} />
      <Route component={InterviewContainer} name="interview"  path="interviews/companies/:companyId" />
      <Route component={About} name="about" path="about"  />
      <Route component={JobList} name="jobs" path="jobs"  />
    </Route>
    <Route component={Container} path="/"  />
    <Route component={NotFound} path="*"  />
</Router>

Note that I also added the new route for companydetail just recently.

Shubham Khatri · Answer 1 · 2017-11-15T07:26:15.343

0

All your paths needs to be with respect to to base path i.e. /

Change your router config to

 <Switch>
          <Route component={HomePageContainer} exact path="/" />
          <Route component={CompanyDetailContainer} name="companydetail" path="/interviews/companies/:companyId/details" />
          <Route component={InterviewContainer} name="interview" path="/interviews/companies/:companyId" />
          <Route component={Container} path="/" />
          <Route component={NotFound} path="*" />
 </Switch>

edited Nov 15 '17 at 07:26

answered Nov 15 '17 at 07:23

Shubham Khatri

270,417
55
406
400

I don't see what you did differently – PositiveGuy Nov 15 '17 at 07:25
base Paths must have a leading `/` `path="/interviews/companies/:companyId/details"` and `path="/interviews/companies/:companyId"` – Shubham Khatri Nov 15 '17 at 07:27
yea I see it. So is this a react-router 4 thing? Because I'm no longer able to nest right? When in v3 I was nesting, that '/' was taken care of in the parent route probably – PositiveGuy Nov 15 '17 at 07:28
it still doesn't work... – PositiveGuy Nov 15 '17 at 07:28
Check this answer on how to nest routes https://stackoverflow.com/questions/44452858/how-to-write-nested-routes-in-react-router-v4/44453559#44453559 – Shubham Khatri Nov 15 '17 at 07:30
I don't get it so I have to also add routes to my CompanyDetailContainer, InterviewContainer, etc.? – PositiveGuy Nov 15 '17 at 07:33
Yes, from v4 onwards you can write your routes in the container itself instead of nesting it at the top level and writing {this.props.children} in the container – Shubham Khatri Nov 15 '17 at 07:34
I know, but then why are people saying I should be able to get the above working as is? – PositiveGuy Nov 15 '17 at 07:35
your Container component simply renders this.props.children which will be undefined and maybe your routes are rendering `/`, can you confirm that. Also can you show how are you redirecting. Redirect links should also be wrt base route – Shubham Khatri Nov 15 '17 at 07:37
I am using react-router's Link component for redirecting. `import { Link } from 'react-router-dom';`. Then when I click on that, it hits whatever route and showing me a blank page whereas in react v3, I was using link via `const Link = require('react-router').Link;` – PositiveGuy Nov 15 '17 at 07:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159033/discussion-between-shubham-khatri-and-positiveguy). – Shubham Khatri Nov 15 '17 at 07:41

score 0 · Answer 2 · answered Nov 15 '17 at 07:30

0

Try wrapping your router in an anonymous function.

const App = () => (
      <BrowserRouter onUpdate={onUpdate}>
        <Switch>
          <Route component={HomePageContainer} exact path="/" />
          <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
          <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
          <Route component={Container} path="/" />
          <Route component={NotFound} path="*" />
        </Switch>
      </BrowserRouter>
)

answered Nov 15 '17 at 07:30

MapLion

1,041
1
12
38

why/??? I like it as a class – PositiveGuy Nov 15 '17 at 07:37
because all of the v4 examples have it that way >< https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf – MapLion Nov 15 '17 at 07:40
yea but it doesn't have to be that way.. – PositiveGuy Nov 15 '17 at 08:15
I was just suggesting you try it and see if you can get something to work like the examples, then alter to taste after you get it working. – MapLion Nov 16 '17 at 02:36

route redirects to nothing react-router 4

2 Answers2

Linked