React路由器未重新加载旧组件

Question

我有这个路由系统

....
<Route  path="/:slug_1/:slug_2" name="component_2" component={component_2}/>
<Route  path="/:slug_1" name="component_1" component={component_1}/>
....

加载主页时，我在单击路径.../slug-1的component_1链接之后，又单击了路径.../slug-1/slug-2的component_2链接。但在此之后，当我单击component_1链接并在URL中创建路径.../slug-2/slug-1时，它必须是路径.../slug-1

请帮帮我))

Answer 1

更改顺序并使component_1完全如下所示：

....
<Route exact path="/:slug_1" name="component_1" component={component_1}/>
<Route  path="/:slug_1/:slug_2" name="component_2" component={component_2}/>
....

这样，如果用户不输入slug_2，路由将转到component_1。

如果存在slug_2，它将转到component_2

Answer 2

注意开关和精确路径的使用

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

    import App from './App';
    import Component1 from './Component1';
    import Component2 from './Component2';

    const Router = () => (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route exact path="/slug1" component={Component1} />
          <Route path="/slug1/:slug2" component={Component2} />
        </Switch>
      </BrowserRouter>
    );

    export default Router;

您的主文件将呈现可用于在整个应用程序中导航的Router组件

import React from 'react';
import { render, } from 'react-dom';
import Router from './components/Router';

render(<Router />, document.getElementById('root'));