反应未路由到目标页面-反应钩子

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。

我的一条路线未显示目标页面。另外，没有“：”版本（即/ id：），则硬编码路径有效，所以我想问题出在（some_variable：...

Answer 1

您的路线匹配者该路线错误。您应该将冒号放在斜线之后