反应路由器触发重定向而不是指定路由

Question

我在react-redux项目中使用react-router-dom 5.1.2。对于我的路由，我有两个文件。第一个是App.js，其中包含redux存储和BrowserRout的提供html" target="_blank">程序：

import React from 'react';
import {Provider} from "react-redux";
import {configureStore} from "../store";
import {BrowserRouter as Router} from "react-router-dom";
import Navbar from "./Navbar";
import Main from "./Main";
import {setAuthorizationToken, setCurrentUser} from "../store/actions/auth";
import jwtDecode from "jwt-decode";

const store = configureStore();

if (localStorage.jwtToken) {
  setAuthorizationToken(localStorage.jwtToken);
  // prevent someone from manually tampering with the key of jwtToken in localStorage
  try {
    store.dispatch(setCurrentUser(jwtDecode(localStorage.jwtToken)));
  } catch (e) {
    store.dispatch(setCurrentUser({}));
  }
}

const App = () => (
    <Provider store={store}>
        <Router>
            <div className="onboarding">
                <Navbar />
                <Main />
            </div>
        </Router>
    </Provider>
);

export default App;

在下一层，我有Main.js，它有到所有组件的路径

import React from "react";
import {Switch, Route, withRouter, Redirect} from "react-router-dom";
import {connect} from "react-redux";
import Homepage from "../components/Homepage";
import AuthForm from "../components/AuthForm";
import {authUser} from "../store/actions/auth";
import {removeError} from "../store/actions/errors"
import withAuth from "../hocs/withAuth";
import GameForm from "./GameForm";
import GamePage from "../components/GamePage";
import FighterForm from "./FighterForm";

const Main = props => {
    const {authUser, errors, removeError, currentUser} = props;
    return (
        <div className="container">
            <Switch>
                <Route path="/" exact render={props => <Homepage currentUser={currentUser} {...props} /> } />
                <Route 
                    path="/signin" exact
                    render={props => {
                        return(
                            <AuthForm 
                                removeError={removeError}
                                errors={errors}
                                onAuth={authUser}
                                buttonText="Log in" 
                                heading="Welcome Back." 
                                {...props} 
                            />
                        )
                    }} />
                <Route 
                    path="/signup" exact
                    render={props => {
                        return(
                            <AuthForm
                                removeError={removeError}
                                errors={errors}
                                onAuth={authUser}
                                signUp
                                buttonText="Sign me up" 
                                heading="Join Weekly Matchup today." 
                                {...props} 
                            />
                        )
                    }} 
                />
                <Route 
                    path="/games/new" exact
                    component={withAuth(GameForm)}
                />
                <Route
                    path="/games/:game_id/fighters/new" exact
                    component={withAuth(FighterForm)}
                />
                <Route
                    path="/games/:game_id"
                    render={props => {
                        return(
                            <GamePage 
                                currentUser={currentUser}
                                {...props} 
                            />
                        )
                    }}
                />

                <Redirect to="/" />
            </Switch>
        </div>
    )
}

function mapStateToProps(state){
    return {
        currentUser: state.currentUser,
        errors: state.errors
    };
}

export default withRouter(connect(mapStateToProps, {authUser, removeError})(Main));

我遇到的问题是，当我使用path=“/games/：game_id/fighters/new”进入路线时，而不是显示FighterForm。js，它会重定向回“/”。

我尝试过在Switch中上下移动路线，但没有产生任何变化。我还将路径更改为仅“/fighter/new”，这有效（路线显示表单）;但是，我需要在参数中使用：game_id，以便在商店操作的后期调用中使用它。

如何在react router中使用此深度级别的路由？

Answer 1

似乎问题出在我为路线设置的链接上，而不是路线本身。我忘了在链接的路径开头添加一个“/”：

破碎版本：

<Link to={`games/${game_id}/fighters/new`} className="btn btn-primary">
    Add a new fighter
</Link>

固定版本：

<Link to={`/games/${game_id}/fighters/new`} className="btn btn-primary">
    Add a new fighter
</Link>