Navegação Customizada no React JS não funciona

Fala aí Marcelo, tudo bem? Consegue postar o código das suas rotas? Ficaria mais fácil entender o problema e tentar te ajudar.

Meu app.js

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import { Link } from 'react-router';

class App extends Component {

    render() {
        return ( <
            div id = "layout" >

            <
            a href = "#menu"
            id = "menuLink"
            className = "menu-link" >

            <
            span > < /span> <
            /a>

            <
            div id = "menu" >
            <
            div className = "pure-menu" >
            <
            a className = "pure-menu-heading"
            href = "#" > Company < /a>

            <
            ul className = "pure-menu-list" >
            <
            li className = "pure-menu-item" > < Link to = "/"
            className = "pure-menu-link" > Home < /Link></li >
            <
            li className = "pure-menu-item" > < Link to = "/autor"
            className = "pure-menu-link" > Autor < /Link></li >
            <
            li className = "pure-menu-item" > < Link to = "/livro"
            className = "pure-menu-link" > Livro < /Link></li >
            <
            li className = "pure-menu-item" > < Link to = "/test"
            className = "pure-menu-link" > Test < /Link></li >


            <
            /ul> <
            /div> <
            /div>

            <
            div id = "main" > { this.props.children } <
            /div>            


            <
            /div>     
        );
    }
}

export default App;

meu index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AutorBox from './Autor';
import Home from './Home';
import Livro from './Livro';
import TestContent from './TestContent';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

ReactDOM.render(
        ( < Router history = { browserHistory } >
            <
            Route path = "/"
            component = { App } >
            <
            IndexRoute component = { Home }
            /> <
            Route path = "/autor"
            component = { AutorBox }
            /> <
            Route path = "/livro"
            component = { Livro }
            /> <
            Route path = "/test"
            component = { TestContent }
            /> < /
            Route > <
            /Router>),
            document.getElementById('root')
        );

código de TestContent.js

import React, { Component } from 'react';

export default class TestContent extends Component {
    render() {
        return ( < div > This is content from the 'TestContent'
            class < /div>)
        }
    }

Será que alguém poderia me dar uma mãozinha aqui?

Fala aí Marcelo, tudo bem? Poderia me passar a versão do seu react-router? Não consegui simular o problema aqui.

Fico no aguardo.

Como faço para saber a versão do react-router?

Posta o conteúdo do seu package.json.

{
  "name": "cdc-admin",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.3.1"
  },
  "dependencies": {
    "jquery": "^3.1.0",
    "pubsub-js": "^1.5.3",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

Bom, vamos lá, o seu problema está acontecendo porque causa dos seu App.js, nele você está renderizando a propriedade .children:

{ this.props.children }

Mas, em nenhum momento no seu código do TestContent você passa o conteúdo como children do App, para isso, faça o seguinte no seu TestContent:

import React, { Component } from 'react';

import App from 'App';

export default class TestContent extends Component {

    render() {
        return (
            <App>
                <div>This is content from the 'TestContent' class</div>
            </App>
        )
    }

}

Veja que foi encapsulado o conteúdo do TestContent dentro do App, agora sim, esse conteúdo chegara como children do App.

O mesmo deve ser feito para os demais.

Obs: É aconselhado que seu App não esteja mapeado em alguma rota, ele serve apenas de container para os demais componentes.

Espero ter ajudado.

Oi! Como pode ver, no meu index.js ele está mapeado para "/". Como procedo?

Achei uma solução para o meu Bug.

Ao invés de usar o Visual Studio Code, passei a usar o Brackets. Quando o Visual Studio formatava o código, passava a não funcionar. Com o uso do Brackets, passou a funcionar :)

Fala aí Marcelo, tudo bem? Realmente, o código não estava bem formatado, eu tive que arrumar para rodar aqui.

Achei que o problema aconteceu ao colar o código aqui no editor, não desconfiei que estava assim no seu próprio projeto, falha minha.

Fico feliz que tenha resolvido.