[Navigate] is not a <Route> component

Question

老师，我用了navigate以后浏览器报错：
Error: [Navigate] is not a component. All component children of must be a or <React.Fragment>
请问什么情况啊？

Answer 1

慕前端6244584 2021-12-07 16:11:13

React-Router 6比较蛋疼，  在看视频的时候使用的 react-router v6.0.2.遇到和楼主一样的问题了。

我最后的做法是：

1.   在最外面index.tsx 中 包裹 APP

   import {Browser Router as Router} ....

   ..... 

   <Router><App/><Router>

        .....

2.  

authenticated-app.tsx

export const AuthenticatedApp = ()=> { 

    let navigate = useNavigate();

    useEffect(() => {

        console.log("run route to projects");     

        navigate('/projects') 

    }, [])

.....

<Main> 

                    <Routes>

                        <Route path={'/projects'} element={<ProjectListScreen/>}> </Route>

                        <Route path={'/projects/:projectId/*'} element={<ProjectScreen/>}></Route>

                    </Routes>

              

</Main>

.......

3

project/indext.tsx

....

 <Link to={'kanban'}>看板</Link> 

        <Link to={'epic'}>任务组</Link>

        <Routes>

            <Route path={'/kanban'} element={<KanbanScreen/>}></Route>

            <Route path={'/epic'} element={<EpicScreen/>}></Route>

        </Routes>

....

Answer 2

Nolan 2021-11-13 01:36:14

https://coding.imooc.com/learn/questiondetail/jlqGxYzEBDZPe1Dk.html 看这里吧