Comments (3)
Which version of React and React Router are you using? React Router v6 made a lot of changes.
Warning: React does not recognize the
computedMatch
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasecomputedmatch
instead. If you accidentally passed it from a parent component, remove it from the DOM element. ReferenceError: Can't find variable: process ```
TypeScript error in /app/src/index.tsx(8,4): 'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition group/node_modules/@types/react/index").ReactNode'. TS2786
6 | 7 | ReactDOM.render( > 8 | <Router> | ^ 9 | <App /> 10 | </Router>, 11 | document.getElementById('root')
ReactDOM.render has been changed to createRoot.
1 | Import { createRoot} from 'react-dom/client'
6 | const container = document.getElementById('root');
7 | const root = createRoot(container!);
8 | root.render(
9 | <Router >
10 | <App />
11 | <Router />
12 | );
'Switch' cannot be used as a JSX component. Its instance type 'Switch' is not a valid JSX element.```
In v6 'Switch' was removed entirely. 'Switch' is now 'Routes'
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. TS2786
There have also been changes made in the way that routes are rendered. This is what it looked like prior:
<header className={classes.header}>
<Route path="/login" component={Login} />
<Login />
<Route path="/signup" component={SignUp} />
<Route
path="/logout"
render={() => {
logout();
history.push('/');
return null;
}}
/>
<PrivateRoute path="/protected" component={Protected} />
<Route exact path="/" component={Home} />
</header>
</div>
</Routes>
This requires some refactoring, so I'd recommend taking a look at what upgrades are needed for React 18 and react hooks
'Redirect' cannot be used as a JSX component.
In v6 'Redirect' has been changed to 'Navigate'. Change 'useHistory' to 'useNavigate' and then 'Redirect' to 'Navigate' in the jsx component.
from fastapi-react.
They're using the version that's in the clean install, as described in the readme.md
I see the same behavior following the instructions provided, and given I was installing this to start playing with and learning react, makes the whole thing pretty useless.
from fastapi-react.
Confirmed this is still a problem.
I was hoping to use this as a basis for a pet project/learning.
Unfortunately, standing up from scratch using README results in a broken state as mentioned by @Kfelts and @chhopsky
from fastapi-react.
Related Issues (20)
- Depreciation message in chrome HOT 1
- Nginx and frontend containers don't start
- [FEATURE REQUEST] Authentication to use HttpOnly Cookie instead of Local Storage tokens
- 'unknown' is not assignable to parameter of type 'SetStateAction<string>'. HOT 5
- cannot load localhost:8000 HOT 1
- Duplicate Superuser with same email
- Integrate SQLModel
- incompatibility between react-scripts and typescript versions HOT 1
- Any plans to upgrade to SQLAlchemy 1.4+ HOT 1
- click doesn't work on Frontend HOT 2
- Typescript errors on default install/up HOT 3
- Switch component shouldn't have div as children
- Frontend build faild HOT 2
- Types and versions HOT 1
- Access to fetch at 'http://localhost:8000/api/v1' from origin 'http://0.0.0.0:8000' has been blocked by CORS policy HOT 1
- is this project dead? HOT 3
- ImportError: cannot import name 'WebSocketException' from 'starlette.exceptions' (/opt/homebrew/lib/python3.9/site-packages/starlette/exceptions.py) HOT 2
- Front end does not respond to mouse. HOT 3
- Typescript error 'Router' cannot be used as a JSX component. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fastapi-react.