Question

我正在使用react-router v4

我们假设我在以下地点

import java.sql.Time;

public class MovieSession implements Comparable<MovieSession> {

    private Time sessionTime;
    private String movieName;
    private char rating;

    public MovieSession(String mn, char rtg, Time tm){
        this.sessionTime = tm;
        this.movieName = mn;
        this.rating = rtg;
    }

    @Override
    public int compareTo(MovieSession currentMovieSession) {
        if (getSessionTime().compareTo(currentMovieSession.getSessionTime()) > 0) {
            return 1;
        } else if (getSessionTime().compareTo(currentMovieSession.getSessionTime()) < 0) {
            return -1;
        } else if (getSessionTime().compareTo(currentMovieSession.getSessionTime()) == 0) {
            if (getMovieName().compareTo(currentMovieSession.getMovieName()) > 0) {
                return 1;
            } else if (getMovieName().compareTo(currentMovieSession.getMovieName()) < 0) {
                return -1;
            }
        }
        return 0;
    }

    public String toString(){
        return String.format("%s - %s - %s", movieName, rating, sessionTime);
    }


    public Time getSessionTime() {
        return sessionTime;
    }


    public void setSessionTime(Time sessionTime) {
        this.sessionTime = sessionTime;
    }


    public String getMovieName() {
        return movieName;
    }


    public void setMovieName(String movieName) {
        this.movieName = movieName;
    }

}

我希望这个位置有一个反应路由器Link元素，它指向

http://localhost:3000/articles

首先尝试：

http://localhost:3000/articles/new

点

 <Link to="new" />

第二次尝试：

http://localhost:3000/new

来自

的任何位置

 <Link to="/new" />

第三次尝试：

http://localhost:3000/new

这

 <Link to="new" />

点

http://localhost:3000/articles/ /* notice the slash at the end */

成功，但我需要它来工作：

http://localhost:3000/articles/new

Answer 1

您应该将Link指向/articles/new

<Link to="/articles/new" />

您的路由器应该与此类似：

const App = () => (
  <Router>
    <div className="wrapper">
      <Route path="/" exact component={Home} />
      <Route path="/articles" component={Articles} />
      <Route path="/articles/new" component={New} />
    </div>
  </Router>
);

注意：配置您的路由器作为示例将呈现两个组件（文章和新）。如果您只想重新编辑New，则应将属性exact添加到父组件。

<Route path="/articles" exact component={Articles} />

当没有尾部斜杠时，如何从子目录路由？

1 个答案: