javascript - React js如何从内容上的子链接打开新页面而不显示上一页

Question

我是reactjs的新用户，现在我正在学习使用react 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;

详情Siswa.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 的官方文档的这一部分中了解更多信息。 .

为了达到预期的效果(到达路由 /siswa/:username 时仅渲染 DetailSiswa)，请从 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 中的完整解决方案.