реагировать js как открыть новую страницу по дочерней ссылке на контент без показа предыдущей страницы

Question

Я новичок в использовании activjs, и теперь я учусь создавать веб-приложения с использованием реагирования js.Но теперь я зашел в тупик по этой проблеме.

Я хочу показать новый контент, например, открыть новую страницу при нажатии на ссылку в контенте без показа предыдущего контента.

Вот мой код:

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';
import Siswa from './components/Siswa';

class App extends Component {

    render() {

        return (
            <Router>
                <div>
                    <Header />

                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/siswa" component={Siswa} />
                    </Switch>

                    <Footer />
                </div>
            </Router>
        );
    }
}

const Home = () => (
    <div style={{ fontSize:'13px' }}>
    <h3>Home</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
);

export default App;

Siswa.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import DetailSiswa from './DetailSiswa';

const SISWAS = [
    {id: 0, username: "luke", nama_lengkap: "Luke Skywalker", tempat_lahir: "Tangerang"},
    {id: 1, username: "solo", nama_lengkap: "Han Solo", tempat_lahir: "Bandung"},
    {id: 2, username: "queen", nama_lengkap: "Queen Apailana", tempat_lahir: "Bandung Barat"}
]; 

const Siswa = ({ match }) => {
    return (
        <div>
            <ul>
            { SISWAS.map( i => 
                <li key={i.id}>
                    <Link key={i.id} to={`${match.url}/${i.username}`}>{i.nama_lengkap}</Link>
                </li>
            )}
            </ul>

            <Route path={`${match.url}/:username`} component={DetailSiswa} />
        </div>
    );
}

export default Siswa;

DetailSiswa.js

import React from 'react';

const DetailSiswa = ({ match }) => {
    return (
        <div>
            <h2>Data Siswa</h2>
            <h3>{match.params.username}</h3>
        </div>
    );
}

export default DetailSiswa;

Это то, что мне нужно.

Спасибо за продвинутый.

Answer 1

Вы используете вложенные маршруты, которые всегда будут отображать компоненты из предыдущего маршрута, который отображал компонент Siswa.Вы можете узнать больше об этом в этом разделе официальной документации для React Router .

Чтобы получить желаемый эффект (рендеринг только DetailSiswa при достиженииroute /siswa/:username), переместите маршрут из Siswa.js в App.js компонент:

import ReactDOM from "react-dom";

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

import Siswa from "./Siswa";
import DetailSiswa from "./DetailSiswa";

class App extends Component {
render() {
    return (
    <Router>
        <div>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/siswa" component={Siswa} />
            <Route path={`/siswa/:username`} component={DetailSiswa} />
        </Switch>
        </div>
    </Router>
    );
}
}

const Home = () => (
<div style={{ fontSize: "13px" }}>
    <h3>Home</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Заметил, что необходимо переместить DetailSiswa импортируйте в компонент App , чтобы вы могли визуализировать компонент в маршруте.

См. Полное решение в этом CodeSandbox .

Answer 2

Даже если ваши /siswa и /siswa/:username имеют общий сегмент URL, если контент, который они отображают, является взаимоисключающим, вероятно, проще всего переместить верхний уровень подробного маршрута:

<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/siswa" component={Siswa} />
  <Route exact path="/siswa/:username" component={SiswaDetail} />
</Switch>