使用 React Router 重定向到仅显示组件/页面内容的页面

Question

所以当我点击一个链接（例如，类别 1 链接）时，我希望它把我重定向到一个页面，其中只有的内容{ {1}} 组件显示，而 Category1 组件的链接（从类别 1 到 3）隐藏。相反，发生的情况是 SelectCategory 组件仍在显示，而所选链接的内容只是放在此组件的底部。然后我希望在每个类别中都有一个 主页 链接，将我带回主页。 （我在下面尝试这样做，但失败了。）我遇到的另一个问题是，每当我单击类别链接时，我仍然需要刷新页面以显示该类别的内容。请帮忙。

总而言之，这就是我想要的：

1. 仅显示所选链接（或组件）的内容。
2. 有一个主页链接，可将我带回主页。
3. 在不刷新页面的情况下显示所选链接的内容。

这是我的代码：

App.js

SelectCategory

SelectCategory.js

import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import SelectCategory from './components/pages/categories/SelectCategory';

const App = () => {
    return (
        <Router>
            <div className='App'>
                <SelectCategory />
            </div>
        </Router>
    );
};

export default App;

Category1.js

import React from 'react';
import { Link, BrowserRouter as Switch, Route } from 'react-router-dom';
import Category1 from './Category1';
import Category2 from './Category2';
import Category3 from './Category3';
// import App from '../../../App';

const SelectCategory = () => {
    return (
        <div>
            <h1>Select A Category</h1>
            <ul>
                <li>
                    <Link to='/category1'>Category 1</Link>
                </li>
                <li>
                    <Link to='/category2'>Category 2</Link>
                </li>
                <li>
                    <Link to='/category3'>Category 3</Link>
                </li>
            </ul>
            {/* <Link to='/'>Home</Link> */}
            <Switch>
                <Route exact path='/category1' component={Category1} />
                <Route exact path='/category2' component={Category2} />
                <Route exact path='/category3' component={Category3} />

                {/* An attempt to make a link redirect back to the homepage */}
                {/* <Route exact path='/' component={App} /> */}
            </Switch>
        </div>
    );
};

export default SelectCategory;

Category2.js

import React from 'react';

const Category1 = () => {
    return (
        <div>
            <h1>This is Category 1</h1>
        </div>
    );
};

export default Category1;

Category3.js

import React from 'react';

const Category2 = () => {
    return (
        <div>
            <h1>This is Category 2</h1>
        </div>
    );
};

export default Category2;

Answer 1

在 SelectCategory.js 中更改这一行。

import { Link, BrowserRouter as Switch, Route } from 'react-router-dom';

到

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

Answer 2

问题

SelectCategory 组件中的拼写错误，BrowserRouter as Switch 应该只是 Switch，因为您的路由器在 App 中运行。

解决方案

• 修复导入。
• 有条件地呈现类别链接

在 SelectCategory 中，您可以将类别链接渲染到与“home”路径 ("/") 完全匹配的路径中，并在该路径外它总是被渲染。为了重定向回您的“home”路径，您实际上需要一个路由呈现“/”以重定向到。为“/”路径渲染一个空的 Route，最后将一个 Redirect 组件渲染到“/”以处理任何路径由Switch。

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

const SelectCategory = () => {
  return (
    <div>
      <ul>
        <h1>Select A Category</h1>
        <Route exact path="/">
          <li>
            <Link to="/category1">Category 1</Link>
          </li>
          <li>
            <Link to="/category2">Category 2</Link>
          </li>
          <li>
            <Link to="/category3">Category 3</Link>
          </li>
        </Route>
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/category1" component={Category1} />
        <Route path="/category2" component={Category2} />
        <Route path="/category3" component={Category3} />
        <Route path="/"></Route>
        <Redirect to="/" />
      </Switch>
    </div>
  );
};