react js 如何在不显示上一页的情况下从子内容 link 打开新页面

Question

我是 reactjs 的新手，现在我正在学习使用 reactjs 制作网络应用程序。但是现在我在这个问题上陷入僵局

我想显示新内容，例如点击内容中的 link 打开新页面，而不显示以前的内容。

这是我的代码：

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 和 /siswa/:username 共享一个共同的 URL 段，如果它们呈现的内容是互斥的，可能最简单的方法就是将详细信息路由移到顶层:

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

Answer 2

您正在使用嵌套路由，它将始终渲染来自先前渲染组件 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 中的完整解决方案。

react js 如何在不显示上一页的情况下从子内容 link 打开新页面

react js How to open new page from child link on content without show previous page

javascript

reactjs

react-router-v4