Question

我有一个名为个人资料的组件，它有两个子组件 时间表和朋友。

我可以从任何其他组件路由到配置文件内的时间轴组件，如下所示：

package org.eclipse.jetty.embedded;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.servlet.ServletHandler;

import nl.basjes.parse.useragent.UserAgent;
import nl.basjes.parse.useragent.UserAgentAnalyzer;

public class MinimalServlets
{
    public static void main( String[] args ) throws Exception
    {
        final UserAgentAnalyzer uaa = UserAgentAnalyzer
                .newBuilder()
                .hideMatcherLoadStats()
                .build();

        Server server = new Server(8080);
        ServletHandler handler = new ServletHandler();
        server.setHandler(handler);
        handler.addServletWithMapping(HelloServlet.class, "/*");
        server.start();
        server.join();
    }

    @SuppressWarnings("serial")
    public static class HelloServlet extends HttpServlet
    {
        @Override
        protected void doGet( HttpServletRequest request,
                              HttpServletResponse response ) throws ServletException,
                                                            IOException
        {
            UserAgent agent = uaa.parse("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36");

            response.setContentType("text/html");
            response.setStatus(HttpServletResponse.SC_OK);
            response.getWriter().println(agent.toString());
        }
    }
}

但是一旦我在这个网址中，之后如果我想要路由到朋友部分，这是时间轴的兄弟，我尝试在配置文件组件中使用它进行路由

<Link to={{ pathname: '/dashboard/profile/timeline/'+userId}}></Link>

路由功能

<Route path="/dashboard/profile/:screenId/:userId" component={this.Routing}/>

但问题是它无法正常工作，点击导航链接时没有触发路由功能

Routing =({ match })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline/>;
        case "friends": return <Friends/>
        default : return <NoMatch/>;
    }
}

此navlink位于Profile组件中。任何帮助将不胜感激。

Answer 1

您需要将路由器道具传递给组件才能进行路由

Routing =({ match, ...rest })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline match={match} {...rest}/>;
        case "friends": return <Friends match={match} {...rest}/>
        default : return <NoMatch match={match} {...rest}/>;
    }
}

兄弟路线不在reactjs工作

1 个答案: