Question

我试图在我的网络中路由路径，但它无法正常工作。我期待着解决这个问题的建议。谢谢你提前。

index.js中的代码

<BrowserRouter>
    <Switch>
        <Route exact path="/login" component={Login} />
        <Route path="/dashboard" name="Home" component={Home} />
        <Route component={Login} />
    </Switch>
</BrowserRouter>

Home.js中的代码

<div>
   <Header/>
      <div className="main">
      <div className="container-fluid">
        <Switch>
          <Route path="/dashboard" name="Dashboard" component={Dashboard} />
          <Route path="/problems" component={ProblemList}/>
          <Redirect from="/" to="/dashboard" />             
        </Switch>
      </div>
      </div>
   <Footer/>
</div>

无效的路径是＆＃34; / problems＆＃34;。它是一个位于带有仪表板的文件夹中的组件。（仪表板正在按下导航栏但但问题列表不是。）

Answer 1

这可能是一个问题：

1）。缺少＆＃34;到＆＃34;，＆＃34; href＆＃34;链接中的属性，单击时将呈现此路径。

如果是这种情况，则可能在控制台中显示错误＆＃34;您必须指定＆＃34;到＆＃34;财产＆＃34;。如果你已经添加＆＃34;到＆＃34;属性然后你可能没有指定＆＃34; href＆＃34;属性在同一标签中。

例如：

<YourComponent componentClass={Link} href="/problems" to="/problems">Problem List</YourComponent>

如果这不是您要查找的内容，请提供控制台中显示的错误。然后它会更容易理解。

希望有所帮助。

Answer 2

如果您使用的是href="/"，请尝试在其后的 to 中添加相同的路径，例如==“ /”。

Answer 3

如果你的链接是http://localhost:3000/problems，那么在你的index.js中你应该添加'/ problems'。然后，只有您的应用程序能够检测到在此路径中显示的组件。

<BrowserRouter>
    <Switch>
        <Route exact path="/login" component={Login} />
        <Route path="/dashboard" name="Home" component={Home} />
        <Route path="/problems" component={ProblemList}/>
        <Route component={Login} />
    </Switch>
</BrowserRouter>

Answer 4

路径不是相对于父路线，而是绝对路径，因此，您需要指定子路线，如

Search

然后您的链接必须是render() { const { match } = this.props; return ( <div> <Header/> <div className="main"> <div className="container-fluid"> <Switch> <Route exact path={match.path} name="Dashboard" component={Dashboard} /> <Route path={`${match.path}/problems`} component={ProblemList}/> </Switch> </div> </div> <Footer/> </div> ) }

反应路由器路径不起作用

4 个答案: