React 没有路由到目标页面 -react hooks

Question

我的其中一条路线未显示目标页面。此外，没有“：”版本（即 /id: ）硬编码路径有效，所以我猜问题在于（ some_variable: 路由版本）。请解释 : 版本

<Route path="/tournament/register/id:" exact component={RegisterTournament}/>

这是路由发生的主页App.js

....all imports....

const App=()=>{
  return (
    <div className="App" >  
        <Router history={History}>
            <div>
                <Header/>
                <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/tournaments" exact component={Tournament}/>
                    <Route path="/myTournaments" exact component={MyTournaments}/>
                    <Route path="/profile" exact component={Profile}/>
                    <Route path="/help" exact component={Help}/>
                    <Route path="/signIn" exact component={SignIn}/>
                    <Route path="/register" exact component={Register}/>
                    <Route path="/results" exact component={Results}/>
                    <Route path="/dashboard" exact component={Dashboard}/>
                    <Route path="/tournament/register/:id" exact component={RegisterTournament}/>
                    <Route path="/tournament/register/:id/summary/" exact component={RegistrationSummary}/>
                </Switch>
            </div>       
        </Router>
    </div>
  );
};

这是我调用该路由的组件的函数

....
....

const registerTournament=({tournament})=>{
        console.log(tournament);
        dispatch({type:ActionTypes.SET_TOURNAMENT_DATA,payload:tournament});
        history.push(`/tournament/register/${tournament.tournament_id}`);

    }
....
....

当上面的 history.push() 时，页面显示空白，但 URL 正确显示为 http://localhost:3000/tournament/register/Aeroflot%20Open%20B%202020 但特定组件未显示 /rendered。

Answer 1

您的路线匹配器对于该路线是错误的。你应该把冒号放在斜杠后面

<Route path="/tournament/register/:id" exact component={RegisterTournament}/>

对汇总路线也做同样的事情

React 没有路由到目标页面 -react hooks

React is not routing to the destination page -react hooks

reactjs

react-router

react-router-v4

react-router-dom