javascript - React.js Route - 重定向后保留上一页

Question

js 并且正在使用 react-router-dom .

假设我有 2 个文件 - 1. dashboard.js 文件

import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';

import WYSIWYG from './editor/wysiwyg';

export default class Dashboard extends Component{
    render(){
        return(
            <div className="wrapper">
                <Switch>
                    <Route exact path="/wysiwyg" component={WYSIWYG}/>
                </Switch>
                <ul id="DASHBOARD-MENU">
                    <li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
                </ul>     
            </div>
        );
    }
}

Note the ul with id="DASHBOARD-MENU" above

---

第二 - wysiwyg.js 文件

import React, { Component } from 'react';

export default class Wysiwyg extends Component{
    render(){
        return(
            <div id="WYSIWYG-CONTAINER">  
            </div>
        );
    }
}

Note the div with id="WYSIWYG-CONTAINER" in the above snippet

---

我的问题是:

重定向到 WYSIWYG 后来 self 的容器 dashboard ，我仍然可以看到 - <ul id="DASHBOARD-MENU" ..在 <div id="WYSIWYG-CONTAINER .. 的下方 呈现.

我理解的-是组件WYSIWYG呈现替换 <Route在我的 dashboard.js 中声明文件。

我想要的:

我不想要 "DASHBOARD-MENU"在我的 "WYSIWYG" 中呈现的元素页面。

这可能吗？

Answer 1

可以通过将两者视为不同的路由来获得所需的行为，因此根据路径只渲染其中一个:

import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';

import WYSIWYG from './editor/wysiwyg';

const Dashboard = () => (
  <ul id="DASHBOARD-MENU">
    <li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
  </ul>
);

export default class Dashboard extends Component{
    render(){
        return(
            <div className="wrapper">
                <Switch>
                    <Route exact path="/" component={Dashboard} />
                    <Route exact path="/wysiwyg" component={WYSIWYG}/>
                </Switch>     
            </div>
        );
    }
}