React-Router запускает Redirect вместо указанного Route - PullRequest
Новая
       59

React-Router запускает Redirect вместо указанного Route

0 голосов
/ 09 апреля 2020

Я использую response-router-dom 5.1.2 в проекте Reaction-Redux. Для моей маршрутизации у меня есть 2 файла. Первым является приложение. js, которое содержит провайдера для магазина редукторов и 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));

Проблема, с которой я сталкиваюсь, заключается в том, что когда я go иду на маршрут с путем = "/ games /: game_id / fighters / new" вместо отображения FighterForm. js, это перенаправляет обратно на "/".

. Я пытался перемещать маршрут вверх и вниз в коммутаторе, но он не изменился. Я также изменил путь на «/ fighter / new», который работал (маршрут отображал форму); однако мне нужно иметь: game_id в параметрах, чтобы использовать его в последующем вызове для действия магазина.

Как я могу заставить работать маршрут с таким уровнем глубины в реакции-маршрутизаторе?

1 Ответ

0 голосов
/ 10 апреля 2020

Кажется, проблема была в связи, которую я установил для маршрута, а не в самом маршруте. Я забыл добавить «/» в начале пути для ссылки:

Неработающая версия: 

<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>
...