return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>javascript - Render Same Component With Multiple Paths React Router Dom - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Render Same Component With Multiple Paths React Router Dom - Stack Overflow

    javascript - Render Same Component With Multiple Paths React Router Dom - Stack Overflow

    programmeradmin1浏览0评论

    I was looking for the simplest way to render the same ponent but from different paths.

    I have the following so that both "/" and "/login" render the Login ponent. 

    import React from "react";
import { Route, Switch, Redirect } from 'react-router-dom';
import './App.scss';
import Login from "../../login/Login";

const App = () => {

   return (
      <div className="App">
         <div className="App-container">
            <Switch>
               <Route exact path={["/", "/login"]} ponent={() => 
                  <Login login={true} />}/>
               <Redirect to="/" />
            </Switch>
         </div>
      </div>
   );

}

export default App;

    This does appear to work, however, it returns an error in the console.

    Warning: Failed prop type: Invalid prop 'path' of type 'array' supplied to 'Route', expected 'string'.

    I'm trying to do this...

    <Route exact path={"/"} ponent={() => <Login login={true} />}/>
<Route exact path={"/login"} ponent={() => <Login login={true} />}/>

    But with a shorter method, is this possible with react-router-dom? Any help would be greatly appreciated

    I was looking for the simplest way to render the same ponent but from different paths.

    I have the following so that both "/" and "/login" render the Login ponent. 

    import React from "react";
import { Route, Switch, Redirect } from 'react-router-dom';
import './App.scss';
import Login from "../../login/Login";

const App = () => {

   return (
      <div className="App">
         <div className="App-container">
            <Switch>
               <Route exact path={["/", "/login"]} ponent={() => 
                  <Login login={true} />}/>
               <Redirect to="/" />
            </Switch>
         </div>
      </div>
   );

}

export default App;

    This does appear to work, however, it returns an error in the console.

    Warning: Failed prop type: Invalid prop 'path' of type 'array' supplied to 'Route', expected 'string'.

    I'm trying to do this...

    <Route exact path={"/"} ponent={() => <Login login={true} />}/>
<Route exact path={"/login"} ponent={() => <Login login={true} />}/>

    But with a shorter method, is this possible with react-router-dom? Any help would be greatly appreciated

    • javascript
    • reactjs
    • react-router-dom
    Share Improve this question edited Mar 12, 2019 at 9:01 mcclosa asked Mar 12, 2019 at 8:54 mcclosamcclosa 1,4759 gold badges34 silver badges78 bronze badges 4
    • 1 Possible duplicate of Multiple path names for a same ponent in React Router – Arnaud Christ Commented Mar 12, 2019 at 8:59
    • @ArnaudChrist That is for react-router. The solution in that question is what I am using above, which is giving me an error in the console. – mcclosa Commented Mar 12, 2019 at 9:00
    • Did you try with the answer using regular expression string from Cameron in the mentioned post ? path="/(home|users|widgets)/" – Arnaud Christ Commented Mar 12, 2019 at 9:03
    • Yes, just wasn't sure how to target / with regular expression? – mcclosa Commented Mar 12, 2019 at 13:31
    Add a ment  | 

    2 Answers 2

    Reset to default 3

    You could create an array that contains the paths / and /login and use map on that array to render the same thing for both paths.

    <Switch>
  {["/", "/login"].map(path => (
    <Route
      key={path}
      exact
      path={path}
      render={() => <Login login={true} />}
    />
  ))}
  <Redirect to="/" />
</Switch>

    If you wish to render the same ponent on the several routes, you can do this by specifying your path as a regular expression

    lets say you want to display 'Home' ponent for 'Home', 'User' and 'Contact' ponents then here is code.

    <Route path="/(home|users|contact)/" ponent={Home} />

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论