Question

我是新手，使用Reactjs，现在我学习使用React JS制作Web应用。但是现在我在这个问题上陷入僵局。

我想显示新内容，例如在单击内容中的链接时打开新页面而不显示以前的内容。

这是我的代码：

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和/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 移至< strong> 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中的完整解决方案。

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

2 个答案: