Weird problem when using StyleRoot component with react-router

[WJWang]

I use radium with react-router I found that when I wrapped the <BrowserRouter> component inside the <StyleRoot> everything works fine. The browser, link, redirection behavior works well.

The example code show as below:

import React from 'react';
import { StyleRoot } from 'radium';
import { BrowserRouter, Route, Link } from "react-router-dom";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export default (
  <StyleRoot>
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  </StyleRoot>
);

However, when I put the <StyleRoot> in the <BrowserRouter>, it will cause the browser action failed.
The redirection and the links are all out of work but no any errors comes out.

...
...
export default (
  <BrowserRouter>
    <StyleRoot>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </StyleRoot>
  </BrowserRouter>
);

The package version info:

react:  ^16.4.2
react-router: ^4.3.1
react-router-dom: ^4.3.1
radium: ^0.24.1

I am not quite sure it a bug or using <StyleRoot> in a wrong way.

[kylecesmat]

@WJWang can you confirm that this issue is still present in 0.25.0?

[WJWang]

@kylecesmat I have tried it again with create-react-app, and still have the same problem in 0.25.0.
Here is my testing codes
https://github.com/WJWang/testing-react-router-radium/blob/master/src/App.js

[stevenmusumeche]

@WJWang this issue is occurring because <StyleRoot> uses PureComponent and react-router (currently) uses the old React Context API. Thus, the changes in the location are not causing a re-render. The best solution for now is to use <StyleRoot> as a parent of <BrowserRouter>. Once react-router updates to use the new Context API (remix-run/react-router#5908) this should no longer be a problem.