React-Router触发重定向，而不是指定的路由

Question

我在react-redux项目上使用react-router-dom 5.1.2。对于我的路由，我有2个文件。第一个是App.js，其中包含redux存储的提供程序和BrowserRouter：

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));

我遇到的问题是，当我走到路径为“ / 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>