Вложенные маршруты React-Router загружают пустую страницу вместо загрузки внутри родительского компонента

100
13

Я новичок в React и пытается создать макет с вложенными маршрутами. Здесь мой сценарий

    show Login, когда URL-адрес/ показать панель инструментов, когда URL-адрес/панель инструментов показать профиль, когда URL/панель/профиль (это должно загружаться внутри области содержимого панели мониторинга)

Страница входа и страница панели мониторинга загружаются должным образом, когда URL-адрес доступен в браузере, но для /dashboard/profile браузер переходит на пустую страницу, а не загружает ее внутри компонента панели.

index.js

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'));

App.js

class App extends Component {
render() {
return (
<div>
{/* <Switch> */}
<Route exact path='/' component={SignIn}/>
<Route exact path='/dashboard' component={Dashboard}/>
{/* </Switch> */}
</div>
);
}
}

export default App;

Dashboard.js

class Dashboard extends React.Component {

render() {
const { classes } = this.props;

return (
<React.Fragment>
<CssBaseline />
<div className={classes.root}>
<Header classes={classes} open={this.state.open} click={this.handleDrawerOpen} />
<Sidebar classes={classes} open={this.state.open} click={this.handleDrawerClose} />
<main className={classes.content}>
<div className={classes.appBarSpacer} />

*********I expect profile component to load here
but when I access the URL /dashboard/profile I get a new blank page*********

Route path="/dashboard/profile" exact component={Profile} />

</main>
</div>
</React.Fragment>
);
}
}

спросил(а) 2021-01-25T16:29:50+03:00 4 месяца, 4 недели назад
1
Решение
63

Вам нужно удалить exact опору с маршрута Dashboard (присутствует в Switch), выполняя детскую маршрутизацию.

Это минимальная реализация вашего варианта использования:

import React, { Component } from "react";
import "./styles.css";

import {
NavLink,
Redirect,
Route,
BrowserRouter as Router,
Switch
} from "react-router-dom";

const App = () => (
<Router>
<div className="App">
<ul>
<li>
<NavLink to="/login">Login</NavLink>
</li>
<li>
<NavLink to="/dashboard">Dashboard</NavLink>
</li>
</ul>

<Switch>
<Route exact path="/login" component={Login} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</div>
</Router>
);

const Login = () => <span>Login Page</span>;

const Dashboard = () => {
return (
<div>
<div>Dashboard Page</div>
<NavLink to="/dashboard/profile">Go to profile</NavLink>
<div>
<Route exact path="/dashboard/profile" component={Profile} />
</div>
</div>
);
};

const Profile = () => {
return <span>Profile Page</span>;
};

export default App;

Здесь вы можете найти рабочий пример: https://codesandbox.io/s/z3py3672v3

ответил(а) 2021-01-25T16:29:50+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема