Возникла проблема с компонентами рендеринга React Router v4. При начальной загрузке приложения он будет отображать правильный компонент, соответствующий URL-адресу. Однако любые последующие Link
щелчки не будут отображать желаемый компонент.
Библиотеки
- React Router: 4.2.2
- Реакция: 15.6.1
- Реагировать на DOM: 15.6.1
- -- just to mention libraries in case of impact --
- React Redux: 5.0.6
- Redux: 3.7.2
- Материал UI: 0.19.0
Собираюсь опустить некоторые imports
для краткости
Структура сайта
index.jsx
|
App.jsx
|
Auth.jsx
|
Layout.jsx
<Routes />
index.jsx
import React from 'react';
import store from './store.js';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
import App from './containers/App.jsx';
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={muiTheme}>
<BrowserRouter>
<App />
</BrowserRouter>
</MuiThemeProvider>
</Provider>,
document.getElementById('root')
);
App.jsx
import React, { Component } from 'react';
import Auth from '../components/Auth.jsx';
class App extends Component {
render() {
return <Auth />;
}
}
Auth.jsx
import React from 'react';
import { Route } from 'react-router-dom';
import Layout from './Layout.jsx';
export default function Auth(props) {
//this Has a render function to render a Loader, Error Page, or the Layout
return <Layout />;
}
Layout.jsx
Здесь есть более сложная визуализация всего приложения. Я собираюсь оставить другие компоненты макета закомментированными и просто оставлю несколько ссылок и компонент Switch
, чтобы заставить их работать, прежде чем делать элементы более модульными.
import React, { Component } from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import Overview from './views/overview/Overview.jsx';
import Home from './views/home/Home.jsx';
export default class Layout extends Component {
render() {
return (
<div className="layout">
{/* <TopBar /> */}
{/* <AppBar/> */}
{/* <Drawer>
<MainMenu/>
</Drawer> */}
<Link to="/">HOME</Link>
<Link to="/overview">Overview</Link>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
</Switch>
{/* <Routes /> */}
{/* <Footer /> */}
</div>
);
}
}
Routes.jsx
Вот как я хочу, чтобы компоненты маршрутов выглядели.
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './views/home/Home.jsx';
import Overview from './views/overview/Overview.jsx';
import Admin from './views/admin/Admin.jsx';
import NotFound from './NotFound.jsx';
export default function Routes(props) {
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
<Route path="/admin" component={Admin} />
<Route component={NotFound} />
</Switch>
);
}
Что-то мне не хватает для рендеринга компонентов при нажатии Link
? Я не получаю никаких консольных ошибок или чего-либо, говорящего мне о проблеме. Поэтому не уверен, правильно ли упакованы компоненты или что может быть причиной проблемы.