使用反应路由器路由到不同组件以获得类似路由

Question

我正在尝试路由到不同的组件，但最后一条路由正在捕获它

<Switch>
    <Route path="/users" exact strict component={Users}/> // this one works fine
    <Route path="/users/new" exact strict component={NewUser}/> // this one is not. the next route is catching it...
    <Route path="/users/:userId" exact strict component={UserDetails}/>
</Switch>

感谢您的帮助。

Answer 1

我想如果你重新安排你的路线它会起作用，这是我的想法

<Switch>
    <Route exact path="/users/new" component={NewUser}/>
    <Route path="/users/:userId" component={UserDetails}/>
    <Route path="/users" component={Users}/> // this one works fine
</Switch>

这个对我有用

你可以试试这个，希望它会工作

Answer 2

嗨，这是我的基本路线，它对我来说工作正常，看看。

谢谢

import React, { Component } from "react";
import "./App.css";
import login from "./login";
import Home from "./Home";
import GoogleApi from "./GoogleApi";
import State from "./State";
import { BrowserRouter, Router, Route, Link, Switch } from "react-router-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={login} />
            <Route path="/googleapi" component={GoogleApi} />
            <Route path="/home" component={Home} />
            <Route path="/state" component={State} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Answer 3

重新排序你的路线它工作正常。我已经在我的项目中测试它

    <Route path="/users/new" exact  component={NewUser}/> 
    <Route path="/users/:userId" exact  component={UserDetails}/>
    <Route path="/users" exact  component={Users}/> 

Answer 4

<BrowserRouter>
          <Switch>
            <Route exact path="/users" component={Users} />
            <Route path="/users/new" component={NewUser} />
            <Route path="/users/:userId" component={UserDetails} />
          </Switch>
        </BrowserRouter>

Answer 5

这里是 go。 我为你创建了一个沙盒。 希望这可以帮助。

https://codesandbox.io/s/silly-borg-hbxvj?fontsize=14&hidenavigation=1&theme=dark